DateNavigator Control - Overview

• Feb 02, 2023
• 2 minutes to read

The DateNavigator control enables the end-user to navigate and select dates.

To learn more about the Date Navigator and see it in action, refer to the Date Navigator online demo.

Implementation Details

The Date Navigator is represented by the DateNavigatorExtension class. Its instance can be accessed via the ExtensionsFactory.DateNavigator helper method, which is used to add a Scheduler extension to a view. This method’s parameter provides access to the Scheduler settings implemented by the DateNavigatorSettings class, allowing you to fully customize the extension.

The Date Navigator‘s client counterpart is represented by the MVCxDateNavigator object.

Declaration

The DateNavigator control requires a SchedulerControl for proper operation. Place them on the same page and specify settings for both controls using the SchedulerSettings instance that is common for them. Add the Scheduler and Date Navigator to a view in the following manner.

View (Razor syntax):

ASPX

<div>
    <div style="float:left">
        @Html.Partial("SchedulerPartial", Model)
    </div>
    <div style="margin-left:10px;float:left;">
        @Html.DevExpress().DateNavigator(SchedulerSettingsHelper.DateNavigatorSchedulerSettings).Bind(Model.Appointments, Model.Resources).GetHtml()
    </div>
</div>

Scheduler and Date Navigator settings implemented in the helper class:

C#

using System;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxScheduler;
using DevExpress.Web.Mvc;
using DevExpress.XtraScheduler;

public class SchedulerSettingsHelper
{
       static SchedulerSettings dateNavigatorSchedulerSettings;
        public static SchedulerSettings DateNavigatorSchedulerSettings {
            get {
                if (dateNavigatorSchedulerSettings == null)
                    dateNavigatorSchedulerSettings = CreateDateNavigatorSchedulerSettings();
                return dateNavigatorSchedulerSettings;
            }
        }
        static SchedulerSettings CreateDateNavigatorSchedulerSettings() {
            SchedulerSettings settings = new SchedulerSettings();
            settings.Name = "scheduler";
            settings.CallbackRouteValues = new { Controller = "Home", Action = "SchedulerPartial" };
            settings.EditAppointmentRouteValues = new { Controller = "Home", Action = "EditAppointment" };

            settings.Storage.Appointments.Assign(SchedulerDataHelper.DefaultAppointmentStorage);
            settings.Storage.Resources.Assign(SchedulerDataHelper.DefaultResourceStorage);

            settings.Start = new DateTime(2012, 5, 13);
            settings.Width = Unit.Pixel(580);
            settings.Views.DayView.ResourcesPerPage = 2;
            settings.Views.DayView.Styles.ScrollAreaHeight = Unit.Pixel(400);
            settings.OptionsBehavior.ShowViewNavigator = false;
            settings.OptionsBehavior.ShowViewSelector = false;

            settings.DateNavigatorExtensionSettings.Name = "dateNavigator";
            settings.DateNavigatorExtensionSettings.Width = 220;
            settings.DateNavigatorExtensionSettings.Properties.Rows = 2;
            settings.DateNavigatorExtensionSettings.Properties.DayNameFormat = DayNameFormat.FirstLetter;
            settings.DateNavigatorExtensionSettings.Properties.BoldAppointmentDates = true;
            return settings;
        }
}

The DateNavigator control is added to the sample project created as described in the Lesson 3 - Use Scheduler in Complex Views document. The result is demonstrated in the picture below.