Configuring ASP.NET MVC Scheduler

Ignite UI for jQuery is a JavaScript-based jQuery UI control suite that you can use to build rich, interactive web applications. For Ignite UI for MVC, you have the option to use JavaScript directly or with the provided Ignite UI for MVC Helpers.

The Ignite UI for MVC Helpers are a collection of .NET classes and extension methods that generate the HTML markup and JavaScript required to work with Ignite UI for jQuery controls. Once rendered to the page, there is very little difference between code you may write by hand using a JavaScript-only approach and what is rendered by Ignite UI for MVC, but using the helpers may be a good choice for you if:

• You feel more comfortable working with MVC view engine syntax or in managed code rather than HTML and JavaScript

This document is focused specifically on explaining the Ignite UI for MVC Scheduler Helper. Along the way you'll become familiar with the different syntax options available when constructing a view as well as the different approaches available to you in working with the server to provide data to the scheduler.

Note: This document shows sample code using the Razor view engine and in C#.

In this topic

• Getting Started
  • Referencing the Ignite UI for jQuery MVC Assembly
  • Referencing Styles and Scripts
• Syntax Variations
  • Scheduler Model
    • Chanining
• Related Content
  • Related Topics

Getting Started

Before you can use the Ignite UI for MVC Scheduler, you must first create a reference to the Infragistics.Web.Mvc assembly and reference the proper scripts and style sheets on your page.

Referencing the Ignite UI for MVC Assembly

Begin by creating a reference in your ASP.NET application to the Ignite UI for MVC assembly which is found at this location:

%%InstallPathMVC%%\<MVC_VERSION_NUMBER>\Bin\Infragistics.Web.Mvc.dll

Referencing Styles and Scripts

Next, you need to reference the required style sheet and script files on your page.

<link type="text/css" href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="css/structure/infragistics.css" rel="stylesheet" />

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>
<script type="text/javascript" src="infragistics.scheduler-bundled.js"></script>

Note: Due to the nature of how the Ignite UI for MVC Helpers operate, you must include references to jQuery, jQuery UI and Ignite UI for jQuery at the top of the page.

Syntax Variations

When using the Ignite UI for MVC Helpers, there are a few different parts that compose a page that are relevant to using the igScheduler. As a page is requested, Model data is collected in the Controller and passed to the View so the Ignite UI for MVC Helpers can render the control on the page. In the controller you would have to pass a Model class, which contains representations of the Appointments and Resources data as an IQueryable<T> collections, where T is an Appointment model or a Resource. Every of the two Models should inherite IModel interface, which is located on Infragistics.Web.Mvc.IModel namespace and should implement ToJson method, which represents the JSON representation of the model.

Note: The Scheduler MVC Helper data source and resources accepts only instances of IQueryable<T>.

Note: If Render method is not invoked, the control won't be visualised.

Therefore, as you use the Scheduler MVC Helper you use syntax that follows a pattern like this:

@(Html.Infragistics().Scheduler()
    .DataSource(/* collection of the appointments data */)
    .Resources(/* collection of the resources data */)
    .Render()
)

Scheduler Model

The first option available for configuring the igScheduler is to define all the options for the scheduler (including the data source and resources) in the controller and simply pass the personaly created scheduler model, which would be, two collections representations of Resource and Appointment models to the Helper. As an example, here a controller creates an instance of the personaly created class and sets the DataSource and Resources properties to an instance of an IQueryable<T> collections.

using Infragistics.Web.Mvc;

...

public class SchedulerModelController : Controller
{
    public ActionResult Index()
    {
        PersonRepository repository = new PersonRepository();

        SchedulerModel model = new SchedulerModel();
        model.DataSource = repository.Appointments.GetAll();
        model.Resources = repository.Resources.GetAll();

        return View(model);
    }
}

Now with the scheduler model being personally created and sent to the view, the MVC Helper is passed the view's Model to render the control.

@using Infragistics.Web.Mvc
@model Project.Namespace.Models.SchedulerModel

...

@(Html.Infragistics().Scheduler()
    .DataSource(Model.DataSource)
    .Resources(Model.Resources)
    .MonthViewSettings(mw =>
    {
        mw.WeekNumberVisible(true);
        mw.WeekdayVisible(true);
    })
    .WeekViewSettings(wv =>
    {
        wv.TimeSlotInterval(SchedulerTimeSlotInterval.SixMinutes);
        wv.WeekViewDisplayModel(SchedulerWeekViewDisplayMode.All7Days);
        wv.WorkingHoursDisplayMode(SchedulerWorkingHoursDisplayMode.WorkingHoursOnly);
    })
    .DayViewSettings(dv =>
    {
        dv.TimeSlotInterval(SchedulerTimeSlotInterval.SixMinutes);
        dv.DayViewDisplayMode(3);
    })
    .Render()
)

Notice that the page requires a using directive to import Infragistics.Web.Mvc at the top of the page to make the API available in the view. The model's declared type is your created model, which matches what was passed to the view by the controller. Since the return type for the Scheduler method in this case is MvcHtmlString (which ultimately is the rendered string of HTML and JavaScript for the page), no further method calls are required to render the control.

If you were to view the source of the page rendered as a result of this example you will see something like this:

<div id="scheduler"></div>

<script type="text/javascript">
    $(function () {
        $('#scheduler').igScheduler({ 
            height: '700px', 
            width: '1200px', 
            dataSource: [ 
                {
                    "id":11,
                    "resourceId":1,
                    "start":"2017-04-08T00:00:00",
                    "end":"2017-04-08T00:00:00",
                    "subject":"Some Subject",
                    "location":null,
                    "description":"Description"
                }, 
                {
                    "id":5,
                    "resourceId":6,
                    "start":"2017-04-10T00:00:00",
                    "end":"2017-04-10T00:00:00",
                    "subject":"Some Subject",
                    "location":null,
                    "description":"Description"
                }, 
                {
                    "id":10,
                    "resourceId":11,
                    "start":"2017-04-20T00:00:00",
                    "end":"2017-04-20T00:00:00",
                    "subject":"Some Subject",
                    "location":null,
                    "description":"Description"
            ], 
            resources: [ 
                {"id":1, "displayName":"grape", "colorScheme":"Teal"}, 
                {"id":6, "displayName":"grape", "colorScheme":null}, 
                {"id":11,"displayName":"grape","colorScheme":null}
            ], 
            monthViewSettings: { 
                isWeekNumberVisible: true, 
                isWeekdayVisible: true 
            }, 
            weekViewSettings: { 
                timeSlotInterval: 'sixMinutes', 
                weekViewDisplayMode: 'all7Days',
                workingHoursDisplayMode: 'workingHoursOnly' 
            }, 
            dayViewSettings: { 
                timeSlotInterval: 'sixMinutes', 
                dayViewNumberOfDays: 3 
            } 
        });
    });
</script>

It’s not important to understand everything in this code listing at the moment, but this is included to help you get an understanding of the type of code rendered as you use the MVC Helper. Notice that a HTML DIV element is generated with an ID of scheduler. Then in the SCRIPT element, just after the jQuery ready anonymous function, is the jQuery selector of $('#scheduler') runs which associates the data and options to the declared DIV element.

Appointment and Resource model example

The following section will show you an example of Appointment and Resource model representation. Both examples will use Newtonsoft.Json for easy and fast serialization of the objects.

    public class AppointmentItem : IModel
    {
        [JsonProperty("id")]
        public int ID { get; set; }

        [JsonProperty("resourceId")]
        public int ResourceId { get; set; }

        [JsonProperty("start")]
        public DateTime Start { get; set; }

        [JsonProperty("end")]
        public DateTime End { get; set; }

        [JsonProperty("subject")]
        public string Subject { get; set; }

        [JsonProperty("location")]
        public string Location { get; set; }

        [JsonProperty("description")]
        public string Description { get; set; }

        public string ToJson()
        {
            return JsonConvert.SerializeObject(this);
        }
    }

    public class ResourceItem : IModel
    {
        [JsonProperty("id")]
        public int ID { get; set; }

        [JsonProperty("displayName")]
        public string DisplayName { get; set; }

        [JsonProperty("colorScheme")]
        [JsonConverter(typeof(StringEnumConverter))]
        public SchedulerResourceColorScheme? ColorScheme { get; set; }

        public string ToJson()
        {
            return JsonConvert.SerializeObject(this);
        }
    }

Note: When you want to create ColorScheme property which is part of the ResourceItem model representation, its type should be Infragistics.Web.Mvc.SchedulerResourceColorScheme. Infragistics.Web.Mvc.SchedulerResourceColorScheme is an enumeration representation of all 12 posible colors, that you are able to use as a resource color scheme. The ColorScheme property has to be explicitly set to what the representation of this enumeration should be. In the above example it matches the string value of the enumeration.

Chaining

The defining of the scheduler model happens with the chaining syntax. When you pass in a collection of data into the MVC Helper, the Scheduler method returns and instance of SchedulerWrapper that exposes a fluent interface allowing you to chain method calls to define the controll on your page.

Related Content

Topics