Smart.Scheduler - Events in depth

Events

Smart.Scheduler Events are defined as objects. Each object has specific attributes that surve a purpose and most of them are validated strictly by the element. However the Smart.Scheduler allows setting any other custom attributes to the Events and will always return them event on export.

The dataSource property of the Smart.Scheduler is used to define the array of events that will be loaded to the element.

• Event Properties
• Repating Events
• Notifications
• Resources

Scheduer Events have the following properties:

These are the Event attributes that Smart.Sheduler uses. Any other attributes added to the Event objects will be preserved but not used by the element.

Resources are assigned to the event object as key-value records. Where the key is the resource's value and value is the resource item id. Event resources are discussed later in this topic.

Here's an example of a Scheduler with two Events:

const today = new Date(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    data = [
        {
            label: 'Event 1',
            dateStart: new Date(currentYear, currentMonth, 15, 9, 30),
            dateEnd: new Date(currentYear, currentMonth, 15, 12),
            description: 'This is the first Event'
        }, {
            label: 'Event 2',
            dateStart: new Date(currentYear, currentMonth, 16, 11, 30),
            dateEnd: new Date(currentYear, currentMonth, 16, 14, 15),
            description: 'This is the second Event'
        }
    ];

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data
        };
    }
});

Demo

Repeating Events

Repeating events have this property assigned. Here are it's attributes:

Repeating event occurances are treated as date occurrences of the event instead of being separate events. Each occurrence has a unique date that the event repeats on. An occurrence can be modified. When modifed it is treated as an exception of the repeating Event. Exceptions as well as occurrences are dispalyed with an additional icon at the top right corner of their respective elements inside the Scheduler timeline.

Here's how a repeating event looks

Here's how an exception looks:

Repeating Event Exceptions

Exceptions are defined as normal Event objects as part of the exceptions attribute of a repeating event object. However they have two additional attributes:

Here is how to reset the exceptions from the repeating series Scheduler Window:

The differences between normal events and exceptions are the following:

• Exceptions must have a unique date attribute - the exception object must have it's date atribute set to a specific repeating occurrence of an event. This is the only required attribute of the exceptions in order for the Scheduler to determine that there's an execption in a future occurrence of the repeating event.
• Exceptions cannot repeat - exceptions are not repeatable. They represent an exception of an occurrence of a repeating event.
• Exceptions can start/end on different date - exceptions can have different start/end date then the original occurrence.
• Exceptions can be hidden - exceptions can be hidden from the Scheduler timeline by setting the hidden attribute.
• Exceptions do not use different resources - exceptions cannot have different resources then the original repeating series. They use the resources of the series.

Here's an example definition of an Event with three exceptions:

const today = new Date(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    data = [
        {
            label: 'Event 1',
            dateStart: new Date(currentYear, currentMonth, 15, 9, 30),
            dateEnd: new Date(currentYear, currentMonth, 15, 12),
            description: 'This is the first Event',
            repeat: {
                repeatFreq: 'daily', // Repeat daily
                repeatInterval: 1, //Repeat every day
                repeatEnd: 10, //Stop after 10 days
                exceptions: [
                    {
                        date: new Date(currentYear, currentMonth, 16, 9, 30),
                        label: 'Official Holliday',
                        backgroundColor: '33b679'
                    },
                    {
                        date: new Date(currentYear, currentMonth, 18, 9, 30),
                        label: 'Day off',
                        hidden: true
                    },
                    {
                        date: new Date(currentYear, currentMonth, 19, 9, 30),
                        label: 'Rescheduled.',
                        dateStart: new Date(currentYear, currentMonth, 19, 15, 30),
                        dateEnd: new Date(currentYear, currentMonth, 19, 18),
                        backgroundColor: '#2196F3'
                    }
                ]
            }
        }, {
            label: 'Event 2',
            dateStart: new Date(currentYear, currentMonth, 16, 11, 30),
            dateEnd: new Date(currentYear, currentMonth, 16, 14, 15),
            description: 'This is the second Event'
        }
    ];

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data
        };
    }
});

Demo:

In the demo above we have a repeating event labeled 'Event 1' that will repeat for 10 days starting 15th of the current month but will skip 18th as an exception because of an unexpected day off and the occurance on 19th is rescheduled for a later hour as an exception again.

Smart.Scheduler has public methods that allow to get all or specific occurrences of an Event:

• occurrences - returns all future occurrences of a repeating event. The method has the following arguments:
  • eventObj - a Scheduler event object with repeating options.
  • max - a number indicating the number of occurrences to return. Optional. If not set only the first 100 occurrences are returned.
• occurrencesBetween - returns all future occurrences of a repeating event between two dates. The method has the following arguments:
  • eventObj - a Scheduler event object with repeating options.
  • dateFrom - the start date for the occurrences. Reccurences after this date will be returned.
  • dateTo - the end date for the occurrences. Reccurences before this date will be returned.
• occurrenceAfter - returns the first occurrence of a repeating event after a date. The method has the following arguments:
  • eventObj - a Scheduler event object with repeating options.
  • date - the start date for the occurrence. The first occurrence after this date will be returned.
• occurrenceBefore - returns the first occurrence of a repeating event before a date. The method has the following arguments:
  • eventObj - a Scheduler event object with repeating options.
  • date - the end date for the occurrence. The first occurrence before this date will be returned.

Event Notifications

Scheduler Notifications are displayed in the right top corner of the element. They are refreshed when on event or date change. Notifications do not auto close. However on element refresh the past notifications will not be shown again.

Notifications can be customized inside the notification object definition on specific events.

Notification objects have the following properties:

Additional non Event related notifications can be displayed at any time via the API methods:

• openNotification - allows to open a new custom notificaiton. The method has the following arguments:
  • message - a string that represents the notification message that will be shown.
  • toastSettings - an object with Smart.Toast properties that will be applied to the Toast element that is used to show the notifications. Check the Smart.Toast API for more information on the website
• closeNotifications - closes all visible notifications.

Here's an example on how to define event notification:

const today = new Date(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    data = [
        {
            label: 'Event 1',
            dateStart: new Date(currentYear, currentMonth, 17, 16, 30),
            dateEnd: new Date(currentYear, currentMonth, 17, 18),
            description: 'This is the first Event',
            notifications: [
            {
                interval: 0,
                type: 'days',
                time: [16, 25],
                message: '5 minutes till the event begins !',
            },
            {
                interval: 0,
                type: 'weeks',
                time: [16, 28],
                message: '2 minutes till the event begins !',
                iconType: 'warning'
            }
        ]}, {
            label: 'Event 2',
            dateStart: new Date(currentYear, currentMonth, 16, 11, 30),
            dateEnd: new Date(currentYear, currentMonth, 16, 14, 15),
            description: 'This is the second Event'
        }
    ];

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data
        };
    }
});

window.onload = function() {
    //Open a Custom Notification
    document.querySelector('smart-scheduler').openNotification('Custom Notificaiton');
}

Demo:

Event Resources

Event resources are applied as key-value attributes directly on the Event object. The key of the attribute should match the value property of a Smart.Scheduler resource while the value of the attribute should match the id of one of items defined in the dataSource of the resource that corresponds to the key.

If the Smart.Scheduler has no resources defined then the key-value pair that should set a resource to the event is treated as a common object atftribute.

Resources allow to assign Events to specific entities( for example, assing events to different people).

Resources can also be used to style the Events that have them assigned differently from the rest.

Resources also allow to group the Events inside the Scheduler. When grouped all Events that do not have the appropriate resources assigned will not be displayed.

Here's how Resources can be assigned to Events:

const today = new Date(),
    currentYear = today.getFullYear(),
    currentMonth = today.getMonth(),
    data = [
        {
            label: 'Event 1',
            dateStart: new Date(currentYear, currentMonth, 17, 16, 30),
            dateEnd: new Date(currentYear, currentMonth, 17, 18),
            description: 'This is the first Event',
            priorityId: 1 //Assign the Event to resource 'priorityId' item 1 - Low Priority
           }, {
            label: 'Event 2',
            dateStart: new Date(currentYear, currentMonth, 16, 11, 30),
            dateEnd: new Date(currentYear, currentMonth, 16, 14, 15),
            description: 'This is the second Event',
            priorityId: 2 //Assign the Event to resource 'priorityId' item 2 - Medium Priority
        }
    ];

    
const priorityData = [
{
    label: 'Low Priority',
    id: 1,
    backgroundColor: '#1e90ff' //Resource specific color
}, {
    label: 'Medium Priority',
    id: 2,
    backgroundColor: '#ff9747' //Resource specific color
}
];

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data,
            resources: [
            {
                label: 'Priority',
                value: 'priorityId',
                dataSource: priorityData
            }
        ]
        };
    }
});

Here we have a single resource with two items - Low and Medium Priority. Each of the items have an event assigned to them.

Demo:

Event Resources can be edited and re-assigned via the Window Editor as shown in the image above.