![](\"https:\/\/mindfusion.dev\/product_images\/javascript\/library\/scheduler\/appointment_schedule.png\")
<\/a><\/p>\nI. Project Setup<\/strong><\/p>\n The first thing we’ll do is to create a DIV element and assign it an id. The JS Schedule library needs and HTML div element where the timetable will be rendered. We create one:<\/p>\n You can position the div element wherever you wish. It’s location and size determine the location and the size of the schedule.<\/p>\n Next, we need to reference the Schedule library file. It is called MindFusion.Scheduling. We reference it at the end of the web page, right after the closing BODY tag:<\/p>\n We will write the JavaScript code for the appointment schedule in a separate JS file, which we call AppointmentSchedule. We have added a reference to it as well.<\/p>\n II. Schedule Settings<\/strong><\/p>\n In the JavaScript code behind file we first create a mapping to the MindFusion.Scheduling namespace and a reference to the Intellisense file:<\/p>\n Next, we use the id of the DIV element to create an instance of the Calendar<\/a> class:<\/p>\n We set the currentView<\/a> property of the calendar to CalendarView<\/a> Timetable:<\/p>\n We use the timetableSettings<\/a> property to specify the time range for each day. The starttime and endTime<\/a> properties set exactly the begin and end of the time interval rendered by the timetable columns. They are measured in minutes, from midnight of the day they refer to. We want the schedule to start from 7 A that is why we set 420 as value to the startTime<\/a> property – the minutes in 7 hours.<\/p>\n The titleFormat<\/a> property specifies how the date at each timetable column will be rendered. The format string follows the standard date and time pattern for JavaScript:<\/p>\n The tooltipFormat<\/a> follows a custom formatting pattern, used by Js Scheduler. It supports special format strings like:<\/p>\n III. Contacts, Locations and Grouping<\/strong><\/p>\n The 4 practitioners are instances of the Contact<\/a> class:<\/p>\n It is important to add them to the contacts<\/a> property of the schedule. The rooms where the appointments take place are Location<\/a> instances:<\/p>\n The grouping of the data that is rendered by the timetable is done is a method called group:<\/p>\n When we’ve created the locations and contacts, we added them to the locations<\/a> and contacts<\/a> collections of the schedule<\/a> property of the Calendar<\/a> . Grouping of the appointments is done based on the contacts<\/a> and locations<\/a> collections of the Calendar<\/a> (not the schedule<\/a> ). That is why in the group method we clear the data from the respective collection and add to it all data from the corresponding collection in the schedule<\/a> Of course, we must set the groupType<\/a> property to the appropriate GroupType<\/a> value.<\/p>\n IV. Appointments<\/strong><\/p>\n When the user selects a range of cells the new Appointment dialog appears automatically. There they can enter all necessary data. We want to implement check if a given room is free when the user tries to create a new appointment in this room. We will do the check in the handler of the itemCreating<\/a> event. The itemCreating<\/a> event is raised when the new item has not been ready yet and the ItemModifyingEventArgs<\/a> object that is provided to the event handler gives the opportunity to cancel the event:<\/p>\n We use a helper method called overlappingAppointments, whose only task is to compare the time range of two items and return true if their time span overlaps – entirely or partially.<\/p>\n V. Timeline<\/strong><\/p>\n Our timetable renders one day at a time. When the user wants to add an appointment that is due in 10 days, they will need to do a lot of scrolling. We can solve the problem by adding a date list at the top o the timetable. The list is another Calendar<\/a> instance and but its currentView<\/a> is set to CalendarView<\/a> List.<\/p>\n We first need to add another DIV element that will be used by the constructor of the new Calendar<\/a>:<\/p>\n Then we create new Calendar<\/a> object and make it render a list with dates:<\/p>\n By default each Calendar<\/a> renders the current date when it starts. We make it display a succession of 30 days. We want each day to have a prefix that indicates its week day. In addition, we hide the header of the calendar and stop the default “New Appointment” form from rendering when the user clicks on a cell:<\/p>\n How do we “wire” the selected date in the timeline to the active date in the timetable? We handle the selectionEnd<\/a> event and there we assign the selected date from the timeline as the active date of the timetable:<\/p>\n A timetable renders those dates, that are added to its dates<\/a> property. We add just one date – the date that was selected in the list.<\/p>\n Let\u2019s not forget to call the render<\/a> method once we’ve finished all customizations on both Calendar<\/a> render the calendar control<\/p>\n VI. Styling<\/strong><\/p>\n The general styling of the two Calendar<\/a> instances is done with one of the predefined themes of the Js Scheduler library. First, we need to add a reference to the CSS file, where it is defined. We’ve chosen the “pastel” theme, which is defined in pastel.css:<\/p>\n Then we need only to set its name as a plain string to the theme<\/a> property of the two Calendar<\/a> instances:<\/p>\n There is one more styling that we want to do: we want the appointments of each practicioner to be colored in a different color. We inspect the styling o the appointment element in the browser and find out that the styling of the items is set by the class mfp-item. We create 4 different sub-classes of mfp-item for the 4 practitioners:<\/p>\n Then we need to assign the correct class to the appointments. We will do this with the cssClass<\/a> property of Item<\/a> We handle the itemCreated<\/a> event where we get information for the appointment that was created:<\/p>\n }<\/p>\n The easiest way to assign the correct CSS class to the item is to assign data that will help us generate the correct style name. We use the tag<\/a> property of Contact<\/a> and assign each practitioner an id that mirrors the last letter in the CSS class we should assign to the appointments associated with this contact.<\/p>\n With that our appointment application is finished. You can download the full source code with the libraries and styles used from this link:<\/p>\n Appointment Schedule in JavaScript: Source Code Download<\/a><\/p>\n About MindFusion JavaScript Scheduler:<\/em> MindFusion Js Scheduler is the complete solution for all applications that need to render interactive timetables, event schedules or appointment calendars. Fully responsive, highly customizable and easy to integrate, you can quickly program the JavaScript scheduling library according to your needs. Find out more at https:\/\/mindfusion.dev\/javascript-scheduler.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" In this blog post we will build from scratch an appointment schedule for 4 practitioners. Each appointment is logged with the patient name and contact details. Each appointment can be scheduled in one of 4 rooms. We will also implement … Continue reading <div<\/span> id<\/span>=\"calendar<\/a>\" style<\/span>=\"height: 100%;width: 100%<\/a>\"><\/div<\/span>><\/pre>\n<script<\/span> src<\/span>=\"scripts\/MindFusion.Scheduling.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> src<\/span>=\"AppointmentSchedule.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>><\/pre>\n\/\/\/ \n\nvar p = MindFusion.Scheduling;<\/pre>\n
\/\/ create a new instance of the calendar\ncalendar = new p.Calendar(document.getElementById(\"calendar\"));<\/pre>\n
\/\/ set the view to Timetable, which displays the allotment \n\/\/ of resources to distinct hours of a day\ncalendar.currentView = p.CalendarView.Timetable;<\/pre>\n
calendar.timetableSettings.startTime = 420;\ncalendar.timetableSettings.endTime = 1260;<\/pre>\n
calendar.timetableSettings.titleFormat = \"dddd d MMM yyyy\";\ncalendar.itemSettings.tooltipFormat = \"%s[hh:mm tt] - %e[hh:mm tt] %h (Contact: %d)\";<\/pre>\n
\n
resource = new p.Contact();\nresource.firstName = \"Dr. Lora\";\nresource.lastName = \"Patterson\";\nresource.tag = 2;\ncalendar.schedule.contacts.add(resource);<\/pre>\n
resource.name = \"Room 112\";\ncalendar.schedule.locations.add(resource);<\/pre>\n
function group(value) {\n\tcalendar.contacts.clear();\n\tif (value == p.GroupType.GroupByContacts) {\n\t\t\/\/ add the contacts by which to group to the calendar.contacts collection\n\t\tcalendar.contacts.addRange(calendar.schedule.contacts.items());\n\t}\n\tcalendar.locations.clear();\n\tif (value == p.GroupType.GroupByLocations) {\n\t\t\/\/ add the locations by which to group to the calendar.locations collection\n\t\tcalendar.locations.addRange(calendar.schedule.locations.items());\n\t}\n\tcalendar.groupType = value;\n}<\/pre>\ncalendar.itemCreating.addEventListener(handleItemCreating);\n\nfunction handleItemCreating(sender, args)\n{\n\tvar appLocation = args.item.location;\n\t\n\tif(appLocation != null )\n\t{\n\t\tif(appLocation.name != \"\")\n\t\t{\n\t\t\tvar items = calendar.schedule.items.items();\n\t\t\tfor(var i = 0; i < calendar.schedule.items.count(); i++)\n\t\t\t{\n\t\t\t\tif( items[i].location == null)\n\t\t\t\t\tcontinue;\n\t\t\t\t\n\t\t\t\t\/\/if the location is the same as the location of another appointment\n\t\t\t\t\/\/at that time we cancel the creating of the appointment\n\t\t\t\tif( items[i].location.name == appLocation.name && \n\t\t\t\toverlappingAppointments (args.item, items[i]))\n\t\t\t\t{\n\t\t\t\t\targs.cancel = true;\n\t\t\t\t\talert(\"The room is already taken\");\n\t\t\t\t}\n\t\n\t\t\t}\n\t\t}\n\t}\n}<\/pre>\n\/* checks if the time allotted to two different appointments overlaps *\/\nfunction overlappingAppointments(item1, item2)\n{\n\tif( item1.startTime < item2.startTime &&\n\t item1.endTime < item2.endTime )\n\t\t return false;\n\t\t \n\tif( item1.startTime > item2.endTime &&\n\t item1.endTime > item2.endTime )\n\t\t return false;\t\n\t\t \n\t\t return true;\t \t\t\n}<\/pre>\ndatePicker = new p.Calendar(document.getElementById(\"datePicker\"));\ndatePicker.currentView = p.CalendarView.List;<\/pre>\n
datePicker.listSettings.visibleCells = datePicker.listSettings.numberOfCells = 30;\ndatePicker.listSettings.headerStyle = p.MainHeaderStyle.None;\ndatePicker.listSettings.generalFormat = \"ddd d\";\ndatePicker.useForms = false;<\/pre>\n
function handleSelectionEnd(sender, args) {\n\tvar startDate = args.startTime;\n\tvar endDate = args.endTime;\n\n\t\/\/ show the selected date range in the timetable\n\tcalendar.timetableSettings.dates.clear();\n\twhile (startDate < endDate) {\n\t\tcalendar.timetableSettings.dates.add(startDate);\n\t\tstartDate = p.DateTime.addDays(startDate, 1);\n\t}\n}<\/pre>\ncalendar.render();\n\/\/render the timeline control\ndatePicker.render();<\/pre>\n
<\/pre>\n
calendar.theme = \"pastel\";\ndatePicker.theme = \"pastel\";<\/pre>\n
.itemClass0 .mfp-item\n\t\t{\n\t\t\tbackground-color: #03738C !important;\n\t\t\tcolor: #fff !important;\n\t\t}\n\t\t.itemClass1 .mfp-item\n\t\t{\n\t\t\tbackground-color: #03A6A6 !important;\n\t\t\tcolor: #fff !important;\n\t\t}\n..............<\/pre>\ncalendar.itemCreated.addEventListener(handleItemCreated);\n\nfunction handleItemCreated(sender, args)\n{\n\tvar contact = args.item.contacts.items()[0];\n\t\n\tif(contact != null )\n\t\targs.item.cssClass = \"itemClass\" + contact.tag;<\/pre>\n