Custom "12 Hours" View

Scheduler Javascript
#1

Hello,

First thank you for the great scheduler. I love how flexible it is.

I am trying to create a custom view. A “12 Hours” view that is just like the “Day” view except it starts at 7:00 and ends at 19:00

Note that I cannot use
scheduler.config.first_hour = 7;
and
scheduler.config.last_hour = 19;
because my scheduler will have 4 views: “12 Hours”, “Day”, “Week” and “Month”.
The Day and Week views should show the whole day.

I used the following code to create a custom 12 Hours view

[code]scheduler.locale.labels.twelve_hours_tab = “12 Hours”;

scheduler.attachEvent(‘onTemplatesReady’, function () {
scheduler.date.twelve_hours_start = function (date) {
var dayStart = scheduler.date.day_start(date);
return scheduler.date.add(dayStart, 7, ‘hour’);
};

scheduler.date.get_twelve_hours_end = function (start_date) {
	return scheduler.date.add(start_date, 12, 'hour');
};

scheduler.date.add_twelve_hours = function (date, inc) {
	return scheduler.date.add(date, inc, 'day');
};

scheduler.templates.twelve_hours_date = scheduler.templates.day_date;
scheduler.templates.twelve_hours_scale_date = scheduler.templates.day_scale_date;

});[/code]

But for some reason the 12 Hours view still shows the whole day, not just 7 AM to 7 PM.

Could somebody please tell me what I am doing wrong and how can I achieve the desired functionality?

Thank you!

#2

The easiest way to implement such view is to copy the day view and switching first/last hours dinamically, before rendering view[code]scheduler.attachEvent(‘onTemplatesReady’, function () {
scheduler.date.twelve_hours_start = scheduler.date.day_start;
scheduler.date.get_twelve_hours_end = scheduler.date.day_end;
scheduler.date.add_twelve_hours = scheduler.date.add_day;
scheduler.templates.twelve_hours_date = scheduler.templates.day_date;
scheduler.templates.twelve_hours_scale_date = scheduler.templates.day_scale_date;
});

scheduler.attachEvent(“onBeforeViewChange”, function (old_mode, old_date, new_mode , new_date){
if(new_mode == “twelve_hours”){
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 19;
}else{
scheduler.config.first_hour = 0;
scheduler.config.last_hour = 24;
}
return true;
});[/code]

#3

Hello Aliaksandr,

It worked after I replaced

scheduler.date.add_twelve_hours = scheduler.date.add_day;

by

scheduler.date.add_twelve_hours = function (date, inc) { return scheduler.date.add(date, inc, 'day'); };

Thank you so much for your help :slight_smile: