Your search did not match any results.
Scheduler

Current Time Indicator

Documentation

This example shows how to enable the current time indication. The switches under the Scheduler allow you to specify how to indicate the current time: by using a specific indicator, shading or both of them. You can also specify how often the Scheduler updates their position using the «Update position in» number box under the widget.

@model DevExtreme.NETCore.Demos.ViewModels.DynamicAppointmentsViewModel @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.Appointments) .Views(new SchedulerViewType[] { SchedulerViewType.Week, SchedulerViewType.TimelineWeek }) .CurrentView(SchedulerViewType.Week) .CurrentDate(DateTime.Today) .ShowCurrentTimeIndicator(true) .ShadeUntilCurrentTime(true) .ShowAllDayPanel(false) .Editing(false) .Resources(res => { res.Add() .FieldExpr("MovieId") .ValueExpr("Id") .DataSource(Model.Resources); }) .Height(600) .StartDateExpr("StartDate") .EndDateExpr("EndDate") .RecurrenceRuleExpr("RecurrenceRule") .OnContentReady(@<text> function(e) { var currentHour = new Date().getHours() - 1; e.component.scrollToTime(currentHour, 30, new Date()); } </text>) .OnAppointmentClick(@<text> function(e) { e.cancel = true; } </text>) .OnAppointmentDblClick(@<text> function(e) { e.cancel = true; } </text>) .AppointmentTemplate(@<text> <% var movie = getMovieById(MovieId); %> <div class="movie"> <img src="<%= movie.Image %>" alt="" /> <div class="movie-text"><%= movie.Text %></div> </div> </text>) ) <div class="options"> <div class="column"> <div class="option"> <div class="label">Current time indicator</div> <div class="value"> @(Html.DevExtreme().Switch() .ID("show-indicator") .Value(true) .OnValueChanged(@<text> function(e) { getSchedulerInstance().option("showCurrentTimeIndicator", e.value); } </text>) ) </div> </div> <div class="option"> <div class="label">Shading until current time</div> <div class="value"> @(Html.DevExtreme().Switch() .ID("allow-shading") .Value(true) .OnValueChanged(@<text> function(e) { getSchedulerInstance().option("shadeUntilCurrentTime", e.value); } </text>) ) </div> </div> </div> <div class="column"> <div class="option"> <div class="label">Update position in</div> <div class="value"> @(Html.DevExtreme().NumberBox() .ID("update-interval") .Min(1) .Max(1200) .Value(10) .Step(10) .ShowSpinButtons(true) .Width("100px") .Format("#0 s") .OnValueChanged(@<text> function(e) { getSchedulerInstance().option("indicatorUpdateInterval", e.value * 1000); } </text>) ) </div> </div> </div> </div> <script> var moviesData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Resources)); function getSchedulerInstance() { return $("#scheduler").dxScheduler("instance"); } function getMovieById(id) { return DevExpress.data.query(moviesData) .filter("Id", id) .toArray()[0] } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class SchedulerController : Controller { public ActionResult CurrentTimeIndicator() { return View(new DynamicAppointmentsViewModel { Appointments = SampleData.DynamicAppointments, Resources = SampleData.DynamicAppointmentsResources }); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class DynamicAppointment { public int MovieId { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public string RecurrenceRule { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<DynamicAppointment> DynamicAppointments { get { var today = DateTime.Today; var testDate = new DateTime(today.Year, today.Month, today.Day - (int)today.DayOfWeek + 3, today.Hour, today.Minute, today.Second); return new List<DynamicAppointment> { new DynamicAppointment { MovieId = 1, StartDate = testDate.AddHours(-113.5), EndDate = testDate.AddHours(-111.5), RecurrenceRule = "FREQ=HOURLY;INTERVAL=15;COUNT=15" }, new DynamicAppointment { MovieId = 2, StartDate = testDate.AddHours(-110.5), EndDate = testDate.AddHours(-108.5), RecurrenceRule = "FREQ=HOURLY;INTERVAL=15;COUNT=15" }, new DynamicAppointment { MovieId = 3, StartDate = testDate.AddHours(-106.5), EndDate = testDate.AddHours(-104.5), RecurrenceRule = "FREQ=HOURLY;INTERVAL=15;COUNT=15" }, new DynamicAppointment { MovieId = 4, StartDate = testDate.AddHours(-104), EndDate = testDate.AddHours(-102), RecurrenceRule = "FREQ=HOURLY;INTERVAL=15;COUNT=15" }, new DynamicAppointment { MovieId = 5, StartDate = testDate.AddHours(-101), EndDate = testDate.AddHours(-99), RecurrenceRule = "FREQ=HOURLY;INTERVAL=15;COUNT=15" } }; } } } }
using System; namespace DevExtreme.NETCore.Demos.Models.SampleData { public class DynamicAppointmentsResource { public int Id { get; set; } public string Text { get; set; } public string Image { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<DynamicAppointmentsResource> DynamicAppointmentsResources { get { return new List<DynamicAppointmentsResource> { new DynamicAppointmentsResource { Id = 1, Text = "His Girl Friday", Image = "../../images/movies/HisGirlFriday.jpg" }, new DynamicAppointmentsResource { Id = 2, Text = "Royal Wedding", Image = "../../images/movies/RoyalWedding.jpg" }, new DynamicAppointmentsResource { Id = 3, Text = "A Star Is Born", Image = "../../images/movies/AStartIsBorn.jpg" }, new DynamicAppointmentsResource { Id = 4, Text = "The Screaming Skull", Image = "../../images/movies/ScreamingSkull.jpg" }, new DynamicAppointmentsResource { Id = 5, Text = "It's a Wonderful Life", Image = "../../images/movies/ItsAWonderfulLife.jpg" } }; } } } }
.dx-scheduler-appointment { color: #000000; font-weight: 500; background-color: #e4e4e4; } .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { padding: 5px 0px 5px 7px; } .options { background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .column { width: 40%; display: inline-block; margin: 15px 3%; text-align: left; vertical-align: top; } .option { padding: 5px 0; } .label, .value { display: inline-block; vertical-align: middle; } .label { width: 180px; } .value { width: 30%; } .movie img { height: 70px; } .movie-text { font-size: 90%; white-space: normal; } #allow-shading, #show-indicator { height: 36px; }