A timetable and a monthly calendar are synchronized to show the same schedule. Use the timetable to the left to create appointments and they will show in the respective days of the month in the calendar to the right.
The basics in a nutshell: how to customize the calendar, handle events and create your own CSS theme. Also: how to save and load to/from a Json file.
The schedule, which reads its data from a public api that exposes Roman Catholic liturgical calendar celebrations for a specified month. The sample also shows how to set-up and use a custom form to create and edit schedule items.
Learn how to create and customize calendar items. The items can be associated with resources, contacts, a location and a task.
The list view displays a number of cells that represents a given time interval - second, minute, hour, day, week, month or year - as you choose. The layout can be horizontal or vertical. The cells can be grouped by location, task, contact or resource.
The minimal application demonstrates the very few basics things you should do to render an interactive schedule on your web page. You can use the UI controls at the top to test the themes and views of the calendar.
Js Scheduler offers two monthly view - for a single month and ranges of months, where the number of months to render are custom-set. There is also a number of settings that let you refine how your schedule looks.
Use the grouping and filtering capabilities of the scheduler to organize the appointments based on contacts or locations. Change the views to experiment how grouping and filters work in each scenario.
The view displays the distribution of items over a period of time for a particular contacts, locations, tasks or resources. The view displays a single row for each individual contact, location, task or resource and up to three timelines.
The view displays one or more days, divided in arbitrary time intervals. You can render the timetables of several days at once. Cells can be grouped by location, task, contact or resource.
The sample changes various calendar views to achieve a "drill-down" effect e.g. to render different levels of detail in a single Calendar object. You can change among a daily timetable, a monthly calendar and a range of months.
The view displays a range o weeks that can be rendered in two styles. The first one renders a week on each row, the second one renders only a single week whose days are divided into two columns.
Create and edit reservations for the four rooms defined as locations for the schedule. This sample presents a filtered MonthRange view. Only one appointment can be created for a day period and location. The calendar's appearance is customized by setting various properties and additional css styles.
A 12-month garden calendar is presented in a horizontal list view, grouped by resources, where each resource represents a different crop. Schedule items are created automatically upon selection and are bound to the specified task. The calendar's appearance is customized by setting various properties and additional css styles.
Ski School Scheduler
A timetable for scheduling ski classes for a ski school. The sample features a custom appointment form and filtering.
This timetable uses the gray theme and CSS for additional styling. The two select controls allow multiple options and you can filter the items based on teacher(s) or room(s).
The sample shows how to build a resource table with the company departments to the left. The cells that correspond to work hours are with different background.