Search results

Appointments

Appointment Types

The types of appointments available within Scheduler can be categorized as follows

Normal

Represents an appointment that is created for a certain time interval in one or more number of days. If the normal appointment is created for more than 24 hours, then those longer appointments will be rendered on the all-day row.

If the normal appointment is to be created for two days (say from November 25, 2015 – 11.00 PM to November 26, 2015 2.00 AM) but less than 24 hour time interval, then the appointment is split into two partitions and will be displayed appropriately on both the days.

All-Day

Represents an appointment that is created for an entire day such as holiday events. It renders separately in an All-day row, a separate place for all-day appointments. In Timeline (horizontal) view, all-day appointment renders in the usual work cells, as no all-day cells are present in that view.

Recurrence

Represents an appointment that is created for a certain time interval that occurs repeatedly in a daily, weekly, monthly, yearly or every weekday basis at the same time interval based on the recurrence rule. The other available options and validations that can be performed on recurrence appointments can be referred from here.

Appointment Fields

The Schedule dataSource usually holds the event instances, where each of the instance are defined with the set of fields depicted here. It is mandatory to map these fields with the equivalent fields of database, when remote data is bound to it. When the local JSON data is bound, then the field names defined within the instances needs to be mapped with the availed properties correctly.

The fields available on each event object are as follows.

Field name Description
id The id field needs to be defined as mandatory, when the Schedule is bound to remote data and it is optional, if the same is bound with JSON data. This field usually assigns ID value to each of the events.
subject The subject field is optional, and usually assigns the subject text to each of the events.
startTime The startTime field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.
endTime The endTime field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.
startTimezone It maps the startTimezone field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the startTime field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Schedule.
endTimezone It maps the endTimezone field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the endTime field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Schedule.
location It maps the location field from the dataSource and the location field value will be displayed over events, while given it for an event object.
description It maps the description field from the dataSource and denotes the event description which is optional.
isAllDay The isAllDay field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone.
recurrenceID It maps the recurrenceID field from dataSource and usually holds the ID value of the parent recurrence event. It is applicable only for the edited occurrence events.
recurrenceRule It maps the recurrenceRule field from dataSource and is used to uniquely identify whether the event belongs to a recurring event type or normal ones.
recurrenceException It maps the recurrenceException field from dataSource and is used to hold the exception dates which needs to be excluded from recurring type.

The below example depicts the local JSON data assigned to Schedule’s dataSource.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.appointments">
                    <e-eventsettings-fields id="Id">
                        <e-field-subject name="Subject"></e-field-subject>
                        <e-field-location name="Location"></e-field-location>
                        <e-field-description name="Description"></e-field-description>
                        <e-field-isallday name="IsAllDay"></e-field-isallday>
                        <e-field-starttime name="StartTime"></e-field-starttime>
                        <e-field-endtime name="EndTime"></e-field-endtime>
                        <e-field-starttimezone name="StartTimezone"></e-field-starttimezone>
                        <e-field-endtimezone name="EndTimezone"></e-field-endtimezone>
                        <e-field-recurrencerule name="RecurrenceRule"></e-field-recurrencerule>
                        <e-field-recurrenceid name="RecurrenceId"></e-field-recurrenceid>
                    </e-eventsettings-fields>
                </e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult appointment-fields()
        {
            ViewBag.appointments = GetScheduleData();
            return View();
        }
        public List<AppointmentData> GetScheduleData()
        {
            List<AppointmentData> appData = new List<AppointmentData>();
            appData.Add(new AppointmentData
            {
                Id = 2,
                Subject = "Paris",
                StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
                EndTime = new DateTime(2018, 2, 15, 12, 30, 0),
                IsAllDay = false,
                RecurrenceID = 10,
                RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5",
                Location = "London",
                Description = "Summer vacation planned for outstation.",
                StartTimezone = "Asia/Yekaterinburg",
                EndTimezone = "Asia/Yekaterinburg"
            });
            return appData;
        }
    }
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public bool IsAllDay { get; set; }
        public int RecurrenceID { get; set; }
        public string RecurrenceRule { get; set; }
        public string Location { get; set; }
        public string Description { get; set; }
        public string StartTimezone { get; set; }
        public string EndTimezone { get; set; }
    }
}

Custom field mapping

Scheduler provides option to use custom field names for appointments as shown below.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.appointments">
                    <e-eventsettings-fields id="TravelId">
                        <e-field-subject name="TravelSummary"></e-field-subject>
                        <e-field-location name="Source"></e-field-location>
                        <e-field-description name="Comments"></e-field-description>
                        <e-field-isallday name="FullDay"></e-field-isallday>
                        <e-field-starttime name="DepartureTime"></e-field-starttime>
                        <e-field-endtime name="ArrivalTime"></e-field-endtime>
                        <e-field-starttimezone name="Origin"></e-field-starttimezone>
                        <e-field-endtimezone name="Destination"></e-field-endtimezone>
                    </e-eventsettings-fields>
                </e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult custom-field()
        {
            ViewBag.appointments = GetScheduleData();
            return View();
        }
        public List<AppointmentData> GetScheduleData()
        {
            List<AppointmentData> appData = new List<AppointmentData>();
            appData.Add(new AppointmentData
            {
                TravelId = 2,
                TravelSummary = "Paris",
                DepartureTime = new DateTime(2018, 2, 15, 10, 0, 0),
                ArrivalTime = new DateTime(2018, 2, 15, 12, 30, 0),
                FullDay = false,
                Source = "London",
                Comments = "Summer vacation planned for outstation.",
                Origin = "Asia/Yekaterinburg",
                Destination = "Asia/Yekaterinburg"
            });
            return appData;
        }
    }
    public class AppointmentData
    {
        public int TravelId { get; set; }
        public string TravelSummary { get; set; }
        public DateTime DepartureTime { get; set; }
        public DateTime ArrivalTime { get; set; }
        public bool FullDay { get; set; }
        public string Source { get; set; }
        public string Comments { get; set; }
        public string Origin { get; set; }
        public string Destination { get; set; }
    }
}

Handling additional fields

Scheduler provides option to include ‘n’ custom fields for appointments and those field values can be accessed with in sample end. The following code example will include the custom fields Status and Priority with in appointment collection.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.appointments">
                    <e-eventsettings-fields id="Id">
                        <e-field-subject name="Subject"></e-field-subject>
                        <e-field-isallday name="IsAllDay"></e-field-isallday>
                        <e-field-starttime name="StartTime"></e-field-starttime>
                        <e-field-endtime name="EndTime"></e-field-endtime>
                    </e-eventsettings-fields>
                </e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult additioinal-fields()
        {
            ViewBag.appointments = GetScheduleData();
            return View();
        }
        public List<AppointmentData> GetScheduleData()
        {
            List<AppointmentData> appData = new List<AppointmentData>();
            appData.Add(new AppointmentData
            {
                Id = 2,
                Subject = "Meeting",
                StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
                EndTime = new DateTime(2018, 2, 15, 12, 30, 0),
                IsAllDay = false,
                Status = "Completed",
                Priority = "High"
            });
            return appData;
        }
    }
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public bool IsAllDay { get; set; }
        public string Status { get; set; }
        public string Priority { get; set; }
    }
}

It is not applicable to define the custom fields with in eventSettings property.

Field validation

It is possible to validate the required fields of the appointment window from client-side before submitting it, by adding appropriate validation rules to each fields. The appointment fields have been extended to accept both String and object type values. Therefore, in order to perform validations, it is necessary to specify object values for the appointment fields.

tagHelper
data.cs
@using Syncfusion.EJ2

@{
    var validationRules = new Dictionary<string, object>() { { "required", true } };
    var descriptionValidationRules = new Dictionary<string, object>() { { "required", true }, { "minLength", 5 } };
}
@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource">
                    <e-eventsettings-fields id="Id">
                        <e-field-subject name="Subject" validation="validationRules"></e-field-subject>
                        <e-field-location name="Location" validation="validationRules"></e-field-location>
                        <e-field-description name="Description" validation="descriptionValidationRules"></e-field-description>
                        <e-field-starttime name="StartTime" validation="validationRules"></e-field-starttime>
                        <e-field-endtime name="EndTime" validation="validationRules"></e-field-endtime>
                    </e-eventsettings-fields>
                </e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult field-validation()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Recurrence options

There are scenarios where you require the same appointments to be repeatedly created for multiple days on daily, weekly, monthly, and yearly or on every weekday basis. While creating or binding the recurrence appointment, recurrenceRule contains recurrence pattern in string format.

Recurrence rule

The recurrence appointments are created based on the recurrence rule. The recurrenceRule is a string value that contains the details of the recurrence appointments like

  • repeat type - daily/weekly/monthly/yearly/every weekday
  • how many times it needs to be repeated
  • the interval duration
  • the time period to render the appointment, etc.,

It has the following properties based on which the recurrence appointments are rendered in the Schedule control with its respective time period.

Property Purpose
FREQ Maintains the Repeat type (Daily, Weekly, Monthly, Yearly, Every week day) value of the appointment. Example: FREQ=DAILY;INTERVAL=1
INTERVAL Maintains the interval value of the appointments. When you create the daily appointment at an interval of 2, the appointments are rendered on the days Monday, Wednesday and Friday (Creates an appointment on all days by leaving the interval of one day gap). Example: FREQ=DAILY;INTERVAL=2
COUNT It holds the appointment’s count value. When the COUNT value is 10, then 10 instances of appointments are created in the recurrence series. Example: FREQ=DAILY;INTERVAL=1;COUNT=10
UNTIL This property holds the end date value (in ISO format) denoting when the recurrence actually ends. Example: FREQ=DAILY;INTERVAL=1;UNTIL=20180530T041343Z;
BYDAY It holds the day value(s), representing on which the appointments actually renders. Create the weekly appointment, and select the day(s) from the day options (Monday/Tuesday/Wednesday/Thursday/Friday/Saturday/Sunday). When Monday is selected, the first two letters of the selected day “MO” is saved in the BYDAY property. When multiple days are selected, the values are separated by commas. Example: FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE;COUNT=10
BYMONTHDAY This property is used to store the date value of the Month, while creating the Month recurrence appointment. When you create a Monthly recurrence appointment for every 3rd day of the month, then BYMONTHDAY holds the value 3 and creates the appointment on 3rd day of every month. Example: FREQ=MONTHLY;BYMONTHDAY=3;INTERVAL=1;COUNT=10
BYMONTH This property is used to store the index value of the selected Month while creating the yearly appointments. When you create the yearly appointment on June month, the index value of June month 6 will get stored in the BYMONTH field. The appointment is created on every 6th month of a year. Example: FREQ=YEARLY;BYMONTHDAY=16;BYMONTH=6;INTERVAL=1;COUNT=10
BYSETPOS This property is used to store the index value of the week. When you create the monthly appointment in second week of a month, the index value of the second week (2) is stored in BYSETPOS. Example: FREQ=MONTHLY;BYDAY=MO;BYSETPOS=2;COUNT=10

The default recurrence validation has been included for recurrence appointments similar to the one available in outlook. The validation occurs during the recurrence appointment creation, drag and drop or resizing of the recurrence appointments and also if any single occurrence changes.

Recurrence options with CRUD

The recurring appointments can be edited or deleted in two ways as below:

  • Single occurrence
  • Entire series

Single occurrence

When an option EDIT EVENT is selected, a single occurrence of the recurrence appointment alone will be edited. Once it is edited then

  • recurrenceID field will be added which holds the id value of its parent recurrence appointment. It is applicable only for the edited occurrence appointments.

  • recurrenceException field will be added to its parent recurrence appointment which holds the edited occurrence appointment date in string type.

When an option DELETE EVENT is selected, a single occurrence of the recurrence appointment alone will be deleted. Once it is edited then recurrenceException field will be added to its parent recurrence appointment which holds the deleted occurrence appointment date in string type.

Entire series

When an option EDIT SERIES is selected, entire recurrence series will be edited. Once this option is chosen then the whole recurrence appointment collection including its edited occurrence will be re-rendered with the new value.

When an option DELETE SERIES is selected, entire recurrence series will be deleted. Once this option is chosen then the whole recurrence appointment collection including its edited occurrence will be removed from Schedule.

Event customization

The field names that are mapped from the dataSource to the appropriate field properties within the eventSettings can be accessed within the template. The following code example will customize the appointment default color and time format.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)" readonly="true">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource" template="@ViewBag.template">
                </e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <style>
        .e-schedule .e-vertical-view .e-content-wrap .e-appointment {
            border-radius: 8px;
        }

        .e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {
            padding: 0;
            height: 100%;
        }

        .e-schedule .template-wrap {
            height: 100%;
            white-space: normal;
        }

        .e-schedule .template-wrap .subject {
            font-weight: 600;
            font-size: 15px;
            padding: 4px 4px 4px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .e-schedule .template-wrap .time {
            height: 50px;
            font-size: 12px;
            padding: 4px 6px 4px;
            overflow: hidden;
        }
    </style>
}
@section PreScripts {
    <script type="text/javascript">
        var instance = new ej.base.Internationalization();
        function getTimeString(value) {
            return instance.formatDate(value, { skeleton: 'hm' });
        }
    </script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult event-customization()
        {
            ViewBag.datasource = new ScheduleData().GetWebinarData();
            ViewBag.template = "<div class='template-wrap' style='background:${SecondaryColor}'><div class='subject' style='background:${PrimaryColor}'>${Subject}</div><div class='time' style='background:${PrimaryColor}'>Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div><div class='image'><img src = '../../Content/schedule/images/${ImageName}.svg' alt='${ImageName}'/></div><div class='description'>${Description}</div><div class='footer' style='background:${PrimaryColor}'></div></div>";
            return View();
        }
    }
}

Tooltip

The tooltip can be applied with the customized template design. By making use of template feature with tooltip, all the field names that are mapped from the dataSource to the appropriate field properties within the eventSettings can be accessed.

tagHelper
data.cs
@using Syncfusion.EJ2

@{
    var template = "<div class='tooltip-wrap'>"+
    "<div class='content-area'><div class='name'>${Subject}</></div>" +
    "${if(City !== null && City !== undefined)}<div class='city'>${City}</div>${/if}" +
    "<div class='time'>From : ${StartTime.toLocaleString()} </div>" +
    "<div class='time'>To   : ${EndTime.toLocaleString()} </div></div></div>";
}
@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource" enableTooltip="true" tooltipTemplate="template">
                </e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult tooltip()
        {
            ViewBag.datasource = new ScheduleData().GetEventsData();
            return View();
        }
    }
}