Custom Time Range Backgrounds
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: mobiscroll.localeEn Selecting the locale loads the localized settings and the translated UI text.
Custom Time Range Backgrounds
Besides customizing the background color of cells and setting up invalid/blocked out times you can customize how these blocks and disabled times look by passing a cssClass to the colors and invalid array elements.
The output could be a custom pattern, custom styling for the labels or anything that you'd like to render as the background. This a great way for adding special meaning to certain days and time ranges.
Demo
Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var inst = mobiscroll.eventcalendar('#demo-colors-invalids-css-class', {
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
view: {
timeline: {
allDay: false,
type: 'week',
startDay: 1,
endDay: 5,
startTime: '09:00',
endTime: '18:00',
},
},
invalid: [
{
start: '12:00',
end: '13:00',
title: 'Lunch break',
recurring: {
repeat: 'weekly',
weekDays: 'MO,TU,WE,TH,FR',
},
cssClass: 'md-lunch-break-class mbsc-flex',
},
],
colors: [
{
resource: 2,
start: '09:00',
end: '11:00',
recurring: {
repeat: 'weekly',
weekDays: 'MO',
},
cssClass: 'md-rect-bg',
},
{
resource: 1,
start: '10:00',
end: '12:00',
recurring: {
repeat: 'weekly',
weekDays: 'WE',
},
cssClass: 'md-rect-bg',
},
{
resource: 3,
start: '14:00',
end: '17:00',
recurring: {
repeat: 'weekly',
weekDays: 'TH',
},
cssClass: 'md-rect-bg',
},
{
resource: 4,
start: '13:00',
end: '18:00',
recurring: {
repeat: 'weekly',
weekDays: 'MO',
},
cssClass: 'md-rect-bg',
},
{
resource: 1,
start: '09:00',
end: '12:00',
recurring: {
repeat: 'weekly',
weekDays: 'FR',
},
cssClass: 'md-stripes-bg',
},
{
resource: 3,
start: '09:00',
end: '12:00',
recurring: {
repeat: 'weekly',
weekDays: 'TU',
},
cssClass: 'md-stripes-bg',
},
{
resource: 5,
start: '10:00',
end: '12:00',
recurring: {
repeat: 'weekly',
weekDays: 'MO',
},
cssClass: 'md-stripes-bg',
},
{
resource: 5,
start: '13:00',
end: '17:00',
recurring: {
repeat: 'weekly',
weekDays: 'TU',
},
cssClass: 'md-stripes-bg',
},
{
resource: 1,
start: '09:00',
end: '12:00',
recurring: {
repeat: 'weekly',
weekDays: 'TH',
},
cssClass: 'md-dots-bg',
},
{
resource: 2,
start: '06:00',
end: '12:00',
recurring: {
repeat: 'weekly',
weekDays: 'TU',
},
cssClass: 'md-dots-bg',
},
{
resource: 4,
start: '15:00',
end: '17:00',
recurring: {
repeat: 'weekly',
weekDays: 'FR',
},
cssClass: 'md-dots-bg',
},
{
resource: 4,
start: '14:00',
end: '18:00',
recurring: {
repeat: 'weekly',
weekDays: 'WE',
},
cssClass: 'md-dots-bg',
},
],
resources: [
{
id: 1,
color: '#ff0101',
name: 'Resource A',
},
{
id: 2,
color: '#239a21',
name: 'Resource B',
},
{
id: 3,
color: '#8f1ed6',
name: 'Resource C',
},
{
id: 4,
color: '#01adff',
name: 'Resource D',
},
{
id: 5,
color: '#d8ca1a',
name: 'Resource E',
},
],
});
mobiscroll.getJson(
'https://trial.mobiscroll.com/timeline-events/',
function (events) {
inst.setEvents(events);
},
'jsonp',
);
<div id="demo-colors-invalids-css-class"></div>
.md-lunch-break-class.mbsc-schedule-invalid {
text-align: center;
align-items: center;
font-weight: bold;
background: repeating-linear-gradient(-45deg, #f3f3f3, #f3f3f3 11px, #e5e5e5 11px, #e5e5e5 22px);
}
.md-stripes-bg {
background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px);
}
.md-dots-bg {
background-image: radial-gradient(#a7a7a7 20%, transparent 20%);
background-color: #f9f9f9;
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
.md-rect-bg {
opacity: 0.8;
background-image: repeating-linear-gradient(45deg, #ffd6d6 25%, transparent 25%, transparent 75%, #ffd6d6 75%, #ffd6d6), repeating-linear-gradient(45deg, #ffd6d6 25%, #ffefef 25%, #ffefef 75%, #ffd6d6 75%, #ffd6d6);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}