Goto date passed in via querystring

[Mark]

Hi,

I have a scheduler which by default loads with month view showing (as per requirements) with the current date showing by default.  However, if a date is passed in via the querystring, I want it to load as day view instead and navigate to that date.  I have figured out how to change the selected date, but I can't get it so change the initial view based on this variable - how can I achieve this?  I've added my code below.

Thanks, Mark

=== DEFINITION OF SCHEDULER ===

@{
    //Get the initial scheduler date from the URL
    DateTime schedulerInitDate = DateTime.Today; 
    if (Request.QueryString["date"] != null && Request.QueryString["date"].Length == 8)
    {
        string strQueryStringDate = Request.QueryString["date"];
        string dayPart = strQueryStringDate.Substring(0, 2);
        string monthPart = strQueryStringDate.Substring(2, 2);
        string yearPart = strQueryStringDate.Substring(4, 4);
        schedulerInitDate = new DateTime(int.Parse(yearPart), int.Parse(monthPart), int.Parse(dayPart), 0, 0, 0);
    }
 }​

@( Html.Kendo().Scheduler<DiaryItemViewModel>()
    .Name("diary")
    .Editable(false)
    .Date(schedulerInitDate)   // sets the initial date for when it loads as today - in month view this takes you to current month, week view to current week etc.
    .StartTime(new DateTime(2015, 6, 1, 7, 00, 00))  // sets the start time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EndTime(new DateTime(2015, 6, 1, 19, 00, 00))   // sets the end time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EventTemplate("<div title='#= title #'>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>#= title #</span></div>" +
                        "#if(Confirmed) {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar.png' /> Appointment Confirmed</div>#" +
                        "} else {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar-grey.png' /> Appointment Unconfirmed</div>#}#" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'>#= Reference #</div>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>Visit By:</span> #= VisitBy #</div>" +                 
                    "</div>")
    .Views(views =>
    {
        views.MonthView();
        views.WeekView();
        views.DayView();
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .ServerOperation(true)
        .Read(read => read.Action("GetAppointments", "Diary").Data("getAdditionalData"))
    )
    .Resources(resource =>
    {
        resource.Add(m => m.Title)
        .Title("Type")
        .DataTextField("Title")
        .BindTo(new[] { 
                        new { text = "General", value = "General", color = "#ffffff" } ,
                        new { text = "Legionella", value = "Legionella", color = "#000000" } ,
                        new { text = "Survey", value = "Survey", color = "#cccccc" } 
                    });
    })
    .Events(e => e
        .DataBound("onSchedulerOpen")
    )
)

 

==== JAVASCRIPT I AM TRYING TO USE TO SWITCH VIEW ON PAGE LOAD - BUT JUST RENDERS EMPTY PAGE ====

    // setup the page
    $(document).ready(function () {

        // set to day view in the diary if a certain date has been passed in via querystring
        if (....) {
            var scheduler = $("#diary").data("kendoScheduler");
            scheduler.view("day");
        }
    })​

[Vladimir Iliev]

Hello,

Please check the example below how you can conditionally select views based on boolean variable:

@{
    //Get the initial scheduler date from the URL
    DateTime schedulerInitDate = DateTime.Today;
    bool isDateProvided = false;
    if (Request.QueryString["date"] != null && Request.QueryString["date"].Length == 8)
    {
        string strQueryStringDate = Request.QueryString["date"];
        string dayPart = strQueryStringDate.Substring(0, 2);
        string monthPart = strQueryStringDate.Substring(2, 2);
        string yearPart = strQueryStringDate.Substring(4, 4);
        schedulerInitDate = new DateTime(int.Parse(yearPart), int.Parse(monthPart), int.Parse(dayPart), 0, 0, 0);
        isDateProvided = true;
    }
 }​

@(Html.Kendo().Scheduler<SchedulerCustomEditor.Models.MeetingViewModel>()
    .Name("scheduler")
    .Date(schedulerInitDate)
    .Views(views => {
        views.DayView(dayView => dayView.Selected(isDateProvided));
        views.MonthView(monthView => monthView.Selected(!isDateProvided));
    })

Another option is to use "if" statement as demonstrated below:

@(Html.Kendo().Scheduler<SchedulerCustomEditor.Models.MeetingViewModel>()
    .Name("scheduler")
    .Date(schedulerInitDate)
    .Views(views => {
        if (isDateProvided)
        {
            views.DayView(dayView => dayView.Selected(true));
            views.MonthView(monthView => monthView.Selected(false));
        }
        else
        {
            views.DayView(dayView => dayView.Selected(false));
            views.MonthView(monthView => monthView.Selected(true));
        }
    })

Regards,
Vladimir Iliev
Telerik