Search results

Timezone

The Scheduler makes use of the System time zone by default. If it needs to follow some other user-specific time zone, then the API timezone can be used. Apart from the default action of applying specific timezone to the entire Scheduler, it is also possible to set different time zone values for each appointments through the properties startTimezone and endTimezone which can be defined as separate fields within the appointment collection.

Display appointments on client timezone

When no specific time zone is set to Schedule through timezone API, appointments will be displayed based on the client timezone value. It is the default behavior.

Appointments based on Schedule timezone

When specific time zone is set to Schedule through timezone API which is different from client timezone then the appointments will be displayed based on Schedule timezone regardless of its client timezone. In the below demo appointments will be displayed at Eastern Time (UTC -05:00).

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Timezone("America/New_York").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 6, 17)).Render()
        </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 ActionResult schedule-timezone()
        {
            ViewBag.datasource = new ScheduleData().GetFifaEventsData();
            return View();
        }
    }
}

Display appointments on same time everywhere

Setting timezone to UTC will only display appointments as same as in database timings for all users in different time zone.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Timezone("UTC").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 6, 17)).Render()
        </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 ActionResult sametime()
        {
            ViewBag.datasource = new ScheduleData().GetFifaEventsData();
            return View();
        }
    }
}

Customizing the timezone collection

Instead of displaying all the default timezone collection (more than 200), you can display your custom collection at sample side as shown below.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 6, 17)).Render()
        </div>
    </div>
}
@section PreScripts {
    <script type="text/javascript">
        var data = [{ Value: 'America/New_York', Text: '(UTC-05:00) Eastern Time' }, { Value: 'UTC', Text: 'UTC' }, { Value: 'Asia/Kolkata', Text: '(UTC+05:30) India Standard Time' }];
        var timezoneData = ej.schedule.timezoneData;
        timezoneData.splice.apply(timezoneData, [0, timezoneData.length].concat(data));
</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 ActionResult timezone-collection()
        {
            ViewBag.datasource = new ScheduleData().GetResourceData();
            List<OwnerResources> owners = new List<OwnerResources>();
            owners.Add(new OwnerResources { OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" });
            owners.Add(new OwnerResources { OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" });
            owners.Add(new OwnerResources { OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" });
            ViewBag.Owners = owners;
            string[] resources = new string[] { "Owners" };
            ViewBag.Resources = resources;
            return View();
        }
    }
    public class OwnerResources
    {
        public string OwnerText { set; get; }
        public int Id { set; get; }
        public string OwnerColor { set; get; }
    }
}