This is a migrated thread and some comments may be shown as answers.

Programmatically update days to display in MultiDayView

1 Answer 81 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 19 Mar 2014, 04:56 PM
I currently have the following extended MutliDayView I'm using to hide/show days of the week. The days to show are selected from checkboxes on the page.

var customView = kendo.ui.MultiDayView.extend({
    name: "customview",
    calculateDateRange: function () {
        var startDate = this.options.date;
        var date = startDate.getDate();
        var day = startDate.getDay();
 
        var weekStart = new Date(startDate.setDate(date - day));
        var weekDate = weekStart.getDate();
 
        // Array to hold the dates that are displayed
        var dates = new Array();
 
        // Array to hold all the days of the week
        var weekDays = new Array();
        for (var i = 0; i < 7; i++)
        {
            weekDays[i] = new Date(weekStart.setDate(weekDate + i));
        }
 
        // Get Selected Days to show from  checkboxes
        var checkboxes = document.getElementsByName('weekday');
        for (var i = 0; i < checkboxes.length; i++)
        {
            // Only add days checked
            if (checkboxes[i].checked)
            {
                // DOW
                var dayNumber = parseInt(checkboxes[i].value);
                dates.push(weekDays[dayNumber]);
            }
        }
        this._render(dates);
    }
});

I have subscribed to the onClick event for checkboxes. I want to add or remove dates from the view. Here is the code
function weekDayClick(cb)
{
    // Get current view
    var scheduler = $("#scheduler").data("kendoScheduler");
    var currentView = scheduler.view();
 
    // If the current view is not "My View", we can just return
    if (currentView.title.toLowerCase() != "my view")
        return;
 
        // Is My View. If Checked, need to add to view; otherwise remove
    var dates = currentView._dates;
    var newDates = new Array();
    var dow = parseInt(cb.value);
 
    if (cb.checked)
    {
        // TODO: Add selected day to dates
    } else
    {
        // Remove date from view
        for (var i = 0; i < dates.length; i++)
        {
            if (dates[i].getDay() != dow)
                newDates.push(dates[i]);
        }
    }
 
    // Render view
    currentView.render(newDates);
    scheduler.view(scheduler.view(customView));
    scheduler.view(scheduler.view().name);
}

However, I cannot get this to work. The only way I can get it to work is change the view from my custom view to another one, make the checkbox changes and then select the custom view again. I have to comment out the event code when using this workaround.

Any suggestions?

1 Answer, 1 is accepted

Sort by
0
Randy
Top achievements
Rank 1
answered on 20 Mar 2014, 12:04 PM
Resolved the issue. You need to toggle between the views. Here is the updated onClick event for the Checkboxes.

// Checkboxes click event
function weekDayClick(cb)
{
    // Get current view
    var scheduler = $("#scheduler").data("kendoScheduler");
    var currentView = scheduler.view();

    // If the current view is not "MUltiView", we can just return
    if (currentView.title.toLowerCase() != "multiview")
        return;

    scheduler.view("week");
    scheduler.view("MultiView");
    return;
}
Tags
Scheduler
Asked by
Randy
Top achievements
Rank 1
Answers by
Randy
Top achievements
Rank 1
Share this question
or