Friday, March 29, 2024
HomeC#Constructing a Hijri Calendar with .NET MAUI Scheduler: A Newbie’s Information

Constructing a Hijri Calendar with .NET MAUI Scheduler: A Newbie’s Information


Calendars differ from nation to nation. Many various calendar varieties are used worldwide primarily based on cultural or non secular traditions.

The Syncfusion .NET MAUI Scheduler helps scheduling, managing, and effectively representing appointments. It was redesigned with a clear and handy person interface for customized working days and hours and fundamental calendar operations akin to date navigation and choice.

It helps creating the next kinds of calendars with ease:  

  • Gregorian (default)
  • Hebrew
  • Hijri
  • Korean
  • Taiwanese
  • Thai Buddhist
  • UmAlQura
  • Persian
  • Japanese

On this weblog, we’ll see easy methods to create and customise a Hijri calendar utilizing the options of the .NET MAUI Scheduler management.

Notice: Earlier than continuing, please learn the getting began with .NET MAUI Scheduler documentation.

Making a Hijri calendar

The Islamic or Hijri calendar is a lunar calendar with 12 months in a yr of 354 or 355 days.

We will simply create a Hijri calendar by setting Hijri as the worth for the .NET MAUI Scheduler’s CalendarType property. Seek advice from the next code instance.

xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;meeting=Syncfusion.Maui.Scheduler"

<scheduler:SfScheduler x:Identify="Scheduler" CalendarType="Hijri" />
Creating a Hijri calendar using the .NET MAUI Scheduler
Making a Hijri calendar utilizing the .NET MAUI Scheduler

Customizing the Hijri calendar

We now have seen easy methods to create a Hijri calendar with ease. Let’s see easy methods to customise it utilizing the options of the .NET MAUI Scheduler.

Use varied views

The .NET MAUI Scheduler dates are displayed primarily based on the calendar sort. It offers eight kinds of views (day, week, workweek, month, timeline day, timeline week, timeline workweek, and timeline month) to show dates.

You possibly can change the Scheduler view utilizing the View property. Seek advice from the next code instance.

<scheduler:SfScheduler x:Identify="Scheduler" CalendarType="Hijri" View="Month" />
Hijri calendar with month view
Hijri calendar with month view

Change the primary day of the week

The Scheduler is rendered with Sunday as the primary day of the week by default. We will change this utilizing the FirstDayOfWeek property.

Seek advice from the next code instance.

<scheduler:SfScheduler x:Identify="Scheduler" CalendarType="Hijri" View="TimelineMonth" FirstDayOfWeek="Monday" />
Changing the first day of the week in the Hijri calendar
Altering the primary day of the week within the Hijri calendar

Create appointments

You possibly can simply add appointments to the Hijri calendar within the following methods:

  • Create appointments with begin and finish time values by declaring the Hijri calendar and the related Hijri calendar date.
    var appointments = new ObservableCollection<SchedulerAppointment>
    {
        // Including schedulean appointment within the schedule appointment assortment.
        new SchedulerAppointment()
        {
           Topic = "Assembly",
           // StartTime and EndTime valuevalues specified with calendar sort and respective calendar date.
           StartTime = new DateTime(1444, 08, 8, 10, 0, 0, new HijriCalendar()),
           EndTime = new DateTime(1444, 08, 8, 11, 0, 0, new HijriCalendar()),
        },
    };
     
    // Including the scheduler appointments to the ItemsSource.
    scheduler.AppointmentsSource = appointments;
  • Create an appointment with begin and finish time values by declaring a neighborhood system date. On this case, the system date will probably be transformed to the related Hijri Calendar.
    var appointments = new ObservableCollection<SchedulerAppointment>
    {
        new SchedulerAppointment()
        {
            Topic = "Assembly",
            // StartTime and EndTime values specified with the native system date will probably be transformed to the Hijri calendar talked about.
            StartTime = new DateTime(2023, 02, 28, 11, 0, 0, 0),
            EndTime = new DateTime(2023, 02, 28, 12, 0, 0, 0),
        }
    };
     
    // Including the scheduler appointments to the ItemsSource.
    scheduler.AppointmentsSource = appointments;
Adding appointments to the Hijri calendar
Including appointments to the Hijri calendar

Group sources

You possibly can group appointments primarily based on their sources within the timeline day, week, workweek, and month views.

Seek advice from the next code instance.

scheduler.View = SchedulerView.TimelineWeek;
         
Checklist<SchedulerResource> sources = new();
SchedulerResource staff = new();
staff.Identify = "Sophia";
staff.Foreground = Colours.White;
staff.Background = new SolidColorBrush(Coloration.FromArgb("#FF8B1FA9"));
staff.Id =  1;
sources.Add(staff);

scheduler.ResourceView.Assets = sources;
Grouping resources in the Hijri calendar
Grouping sources within the Hijri calendar

Affiliate appointments to sources

Affiliate sources with appointments by assigning the IDs of the sources within the ResourceView to the ResourceIds property of the scheduled appointment.

Seek advice from the next code instance.

Checklist<SchedulerAppointment> duties = new();
duties.Add(new SchedulerAppointment()
{
    Topic = "Convention",
    // StartTime and EndTime values specified with calendar sort and calendar date.
    StartTime = new DateTime(1444, 08, 8, 10, 0, 0, new HijriCalendar()),
    EndTime = new DateTime(1444, 08, 8, 11, 0, 0, new HijriCalendar()),
    ResourceIds = new ObservableCollection<object>() { 1 },
});
 
duties.Add(new SchedulerAppointment()
{
    Topic = "Enterprise Assembly",
    // StartTime and EndTime values specified with the native system date will probably be transformed to the Hijri calendar listed.
    StartTime = new DateTime(2023, 02, 28, 11, 0, 0, 0),
    EndTime = new DateTime(2023, 02, 28, 12, 0, 0, 0),
    Background = resourceColors[random.Next(resourceColors.Count)],
    ResourceIds = new ObservableCollection<object>() { 2 },
});
scheduler.AppointmentsSource = appointments;
Assigning appointments to resources in the Hijri calendar
Assigning appointments to sources within the Hijri calendar

Prohibit the minimal and most dates

You possibly can stop customers from choosing dates past the minimal and most date-times in two methods:

  • Set the minimal and most date-time values by declaring the Hijri calendar and the right Hijri calendar date.
    // DateTime worth specified with calendar sort and date.
    scheduler.MinimumDateTime = new DateTime(1443, 08, 8, 10, 0, 0, new HijriCalendar());
    scheduler.MaximumDateTime = new DateTime(1445, 08, 8, 10, 0, 0, new HijriCalendar());
  • Set the minimal and most dates by declaring a neighborhood system date. On this case, the system date will probably be transformed to the related Hijri Calendar date.
    // DateTime worth specified with the native system date will probably be transformed to the Hijri calendar listed.
    scheduler.MinimumDateTime = new DateTime(2022, 02, 28, 11, 0, 0, 0);
    scheduler.MaximumDateTime = new DateTime(2023, 12, 28, 11, 0, 0, 0);

Programmatic Scheduler date navigation

We will programmatically navigate to the dates within the supported calendar varieties utilizing the DisplayDate property. There are two methods to take action:

  • Set the .NET MAUI Scheduler to show the date worth by declaring the Hijri calendar and the related Hijri calendar date.
    // DateTime worth specified with calendar sort and date.
    scheduler.DisplayDate = new DateTime(1444, 08, 8, 10, 0, 0, new HijriCalendar());
  • Set the Scheduler to show the date worth by declaring a neighborhood system date. On this case, the system date will probably be transformed to the related Hijri Calendar date.
    // DateTime worth specified with the native system date will probably be transformed to the Hijri calendar listed.
    scheduler.DisplayDate = new DateTime(2023, 02, 28, 11, 0, 0, 0);

Programmatic scheduler date choice

We will additionally programmatically choose the dates for the supported calendar varieties utilizing the SelectedDate property. There are two methods to take action:

  • Set the Scheduler to pick the date worth by declaring the Hijri calendar and related Hijri calendar date.
    // DateTime worth specified with calendar sort and respective calendar date.
    scheduler.SelectedDate = new DateTime(1444, 08, 8, 10, 0, 0, new HijriCalendar());
  • Set the Scheduler to pick the date-value by declaring a neighborhood system date. On this case, the system date will probably be transformed to the related Hijri calendar date.
    // DateTime worth specified with the native system date will probably be transformed to the Hijri calendar listed.
    Scheduler.SelectedDate = new DateTime(2023, 02, 28, 11, 0, 0, 0);
Selecting a date in the Hijri calendar
Choosing a date within the Hijri calendar

Spotlight particular time area

The .NET MAUI Scheduler helps highlighting a time area in day and timeline views for all of the supported calendar varieties. There are two methods to focus on a selected time area:

  • Create a particular time area with begin and finish time values by declaring the Hijri calendar and correct Hijri calendar dates.
    ObservableCollection<SchedulerTimeRegion> imeRegions = new ObservableCollection<SchedulerTimeRegion>
    {
        new SchedulerTimeRegion
        {
            // StartTime and EndTime valuevalues specified with calendar sort and respective calendar date.
            StartTime = new DateTime(1444, 08, 8, 9, 0, 0, new HijriCalendar()),
            EndTime = new DateTime(1444, 08, 8, 10, 0, 0, new HijriCalendar()),
            Background = new SolidColorBrush(Colours.LightGray),
            Textual content = “Busy”,
            ResourceIds = new ObservableCollection<object> { 1, 3 }
         },
     
    }; 
    
    scheduler.TimelineView.TimeRegions = imeRegions;
  • Create a particular time area with begin and finish time values by declaring a neighborhood system date. On this case, the system date will probably be transformed to the related Hijri calendar date.
    ObservableCollection<SchedulerTimeRegion> imeRegions = new ObservableCollection<SchedulerTimeRegion>
    {
        new SchedulerTimeRegion
        {
            // StartTime and EndTime values specified with the native system date will probably be transformed to the Hijri calendar listed.
            StartTime = new DateTime(2023, 02, 28, 8, 0, 0, 0),
            EndTime = new DateTime(2023, 02, 28, 9, 0, 0, 0),
            Textual content = “Busy”,
            Background = new SolidColorBrush(Colours.LightGray),
            ResourceIds = new ObservableCollection<object> { 2 }
        }
    };
     
    scheduler.TimelineView.TimeRegions = timeRegions;
Highlighting special time regions in the Hijri calendar
Highlighting particular time areas within the Hijri calendar

Change the movement route

The .NET MAUI Scheduler movement route will mechanically change to proper to left for the next calendar varieties:

  • Hebrew
  • Hijri
  • UmAlQura
  • Persian

Localize the customized string

The .NET MAUI Scheduler is displayed with en-US (English) textual content by default. You possibly can localize the textual content (at this time and scheduler views in header) by including the respective useful resource information for the language.

Seek advice from the next code instance.

CultureInfo.CurrentUICulture = new CultureInfo(“ar-AE”);
//// To localize the customized string (at this time, allowed scheduler views) used within the Scheduler.
SfSchedulerResources.ResourceManager = new ResourceManager(“HijriCalendarType.Assets.SfScheduler”, Utility.Present.GetType().Meeting);
Localizing the text in the Hijri calendar
Localizing the textual content within the Hijri calendar

GitHub reference

For extra data, you possibly can obtain the whole instance for making a Hijri calendar utilizing the .NET MAUI Scheduler.

Conclusion

Thanks for studying! On this weblog, we’ve seen easy methods to create a Hijri calendar utilizing the .NET MAUI Scheduler and its fundamental scheduling functionalities. Like this, you can too create the opposite supported calendar varieties and schedule appointments with ease.

For present Syncfusion prospects, the latest model of Important Studio is accessible from the license and downloads web page. If you’re not a buyer, attempt our 30-day free trial to take a look at our controls.

When you have any questions, please tell us within the feedback part under! You can even contact us by our assist discussion board, assist portal, or suggestions portal. We’re at all times pleased to help you!

Associated blogs

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments