Search results

Views

Schedule allows to display the events on all its available views such as

  • Day
  • Week
  • Work week
  • Month
  • Agenda
  • Month-Agenda
  • Timeline Day
  • Timeline Week
  • Timeline Work Week
  • Timeline Month

Except Month-Agenda view, all the other views are displayed by default on the Schedule.

View-specific settings

The fields available are as follows.

Property Type
option View
isSelected Boolean
dateFormat Date
readonly Boolean
startHour String
endHour String
allowVirtualScrolling Boolean
dateHeaderTemplate String
cellTemplate String
eventTemplate String
showWeekend Boolean
displayName String
interval Number
workDays Number[]
resourceHeaderTemplate String
timeScale TimeScaleModel
group GroupModel

Extended views

Views can be extended to display n number of days, weeks and months on a single view using interval property. Refer the below code example to display 3 days, 2 weeks and 4 months on the respective views.

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

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(view => { view.Option(View.Day).DisplayName("3 Days").Interval(3).Add(); view.Option(View.Week).DisplayName("2 Weeks").Interval(2).IsSelected(true).Add(); view.Option(View.Month).DisplayName("4 Months").Interval(4).Add(); }).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 2, 15)).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 extended-views()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

interval property is not applicable on agenda and month agenda views.

Display schedule with specific views

To display specific views alone and to configure other properties available within it, views property can be used.

To configure Schedule with simply 2 views but with different configurations, refer the below code example.

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

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
           @Html.EJS().Schedule("schedule").Width("100%").Views(ViewBag.view).Height("550px").CellTemplate("#apptemplate").SelectedDate(new DateTime(2018, 2, 15)).Render()
        </div>
    </div>
    <script id="apptemplate" type="text/template">
        ${if (type === "monthCells")}
        <div class="templatewrap">
            ${getCellContent(data.date)}
        </div> ${/if}
    </script>
    <script type="text/javascript">
        function getCellContent(date) {
            var weekEnds = [0, 6];
            if (weekEnds.indexOf(date.getDay()) >= 0) {
                return "<img src='weekend.png' /><span class='caption'>Weekend</span>";
            }
            return '';
        }
    </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 specific-views()
        {
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week, ShowWeekend = false },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month}
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Above code example display Schedule with 2 views namely Week and Month – on which weekend days are set to hidden in Week view and cell templates are applied on Month view.