change calendar type based on device screen size

Asked by Ted Finch
3 years ago.

I am using daypilot javascript here http://liveresults.kitst.co.uk to create a calendar overlay.

The monthly format is not really compatible with a phone screen so I would like to use a weekly format.

Can you suggest a code snippet to select month or week format based on the device screen size.

Thanks

Ted

Answer posted by Ted Finch
3 years ago.

Try this

var smallscreen = (window.screen.width < 800);

if (smallscreen) {
    // use a weekly or daily calendar
    var dp = new DayPilot.Calendar("calendar", {
        //viewType: "Week",
        timeRangeSelectedHandling: "Disabled",
        eventMoveHandling: "Disabled",
        eventResizeHandling: "Disabled",
        eventDeleteHandling: "Disabled",
        eventClickHandling: "Enabled",
        eventRightClickHandling: "Disabled",
    });

    DayPilot.Locale.weekStarts = 1;
    dp.locale = 'en-gb';
    dp.theme = "month_transparent";
    dp.startDate = DayPilot.Date.today();

} else {
    var dp = new DayPilot.Month("calendar", {
        timeRangeSelectedHandling: "Disabled",
        eventMoveHandling: "Disabled",
        eventResizeHandling: "Disabled",
        eventDeleteHandling: "Disabled",
        eventClickHandling: "Enabled",
        eventRightClickHandling: "Disabled",
    });

    DayPilot.Locale.weekStarts = 1;
    dp.locale = 'en-gb';
    dp.theme = "month_transparent";
    dp.startDate = DayPilot.Date.today();
}

Cheers
Ted

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Great, thanks for posting your solution!

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.