Minimal Calendar/Scheduler
The properties required for a minimal Calendar/Scheduler are as follows (all properties not set use default values).
Step 1: Decide what data to display and understand the data
Once you understand what your data and its properties are, set one of three properties.
-
Model Data
Example
Calendar/Scheduler Initialized by Model Data
If you are hard-coding the events on a calendar, create the data in this property. An example of data that matches the default Event Template follows. If you copy this data and use Chrome to paste it in the JSON Viewer or JSON Validator on the site https://codebeautify.org/, you will find that it is well formed data.
It is critical that the values used in the Event Template property match properties in your data. If that is not the case, you must use the Mapped Properties to define the required start, id, and end properties. The title, description, and eventUrl should be mapped as well. The template can use either the built-in id, end, start, title, description, eventUrl or the mapped names. (You must use the built-in ones if the calendar is editable). The mapped names are not case sensitive, but their use in templates is. You will get errors if you use template names that do not exactly match either built-in properties or data properties.
This data is an object signified by matching braces {} with one property “data”. “data” is an array signified by matching square brackets [] that contains comma-separated objects. Each object in the array has 6 properties. Notice that commas separate multiple objects and multiple properties within the objects.
For information on JSON syntax, search the internet for JSON Syntax. A good introduction is at https://www.w3schools.com/Js/js_json_intro.asp. Click Next to see JSON Syntax rules.
{ "data": [ { "id": 1, "start": "2018/6/25 10:00 PM", "end": "2018-06-25T23:00", "title": "College Fair", "description": "This is an all day event", "RegistrationUrl": "http://po-170.anthology.com:9003/#/renderer/1224" }, { "id": 2, "start": "2018-06-25T22:00-04:00", "end": "2018-06-25T23:30-04:00", "title": "Career Fair", "description": "This is a meeting", "RegistrationUrl": "http://po-170.anthology.com:9003/#/renderer/1234" }, { "id": 3, "start": "2018-06-25T22:00-07:00", "end": "2018-06-25T23:00-07:00", "title": "Climate Change: Current Policy Challenges ", "description": "This is a meeting", "RegistrationUrl": "http://po-170.anthology.com:9003/#/renderer/1234" }, { "id": 4, "start": "2018/6/25 10:00 AM", "end": "2018/6/25 11:00 AM", "title": "African Heritage Celebration", "description": "This is a meeting", "RegistrationUrl": "http://po-170.anthology.com:9003/#/renderer/1234" }, { "id": 5, "start": "2018/6/25 10:00 AM", "end": "2018/6/25 11:00 AM", "title": "Free Wellness Classes!", "description": "This is a meeting", "RegistrationUrl": "http://po-170.anthology.com:9003/#/renderer/1234" }, { "id": 6, "start": "2018/6/25 11:00 AM", "end": "2018/6/25 11:30 AM", "title": "Philharmonic Orchestra", "description": "This is a meeting", "RegistrationUrl": "http://po-170.anthology.com:9003/#/renderer/1234" } ] } -
Model
This value is set as vm.models.xxxx. The xxxx will correspond to a case sensitive argument in a workflow. The data is retrieved from a database or built manually in a workflow variable and then assigned to an argument. One object that can be used if the properties do not correspond to an Entity is a SerializableDynamicObject.
Example
-
OData Query
The value is set with an OData query to a provider. You should build this with the provider interface as documented elsewhere and then run the query in a browser. Examine the data closely to make sure that the Event Template and Mapped names are correct for the data. Mismatching the names used in an Event Template to the data properties can produce hard to debug issues in running a sequence.
Example
Step 2: Decide on a view
Views are constructed from a JSON object. The view name can be the string name of the view or an object with properties which define the view. Keep it simple to start. Start with one view like a day view. This is an array with only one string that can be verified at https://codebeautify.org/.
[
“day”
]
See Telerik Scheduler documentation for more general information on the Scheduler.
Step 3: Look at your data
If your data is not today’s date, you will not see the events. Therefore, set the “Date” property to the same day as the data you want to see. It is desirable that the date be set as an ISO 8601 compatible string because this is a universal non-ambiguous format.
Example
2018-06-25 is always year, month, day and can always be parsed non-ambiguously.
Step 4: Decide on an event template
The default event template may not be appropriate for most cases. The template must be well formed HTML with placeholders for the data retrieved for each event. Its display must also fit in a small space, so it can’t be a lot of HTML. If you are creating views like a month with very little space per day, use the Event Template property on those views to create a smaller template for them.
In the following default template, notice that the values found in the data above have placeholders bound by either #: xxx # or #=xxx #. The #: renders the string verbatim, while the #= renders the string with HTML encoding (valuable if there are spaces in a URL). If you have custom classes to style the template or images, see documentation elsewhere which describes custom styling of HTML.
Note that there is a glaring error here. eventUrl does not match any property in the data above, and the default Mapped URL is “EventUrl”. The Mapped URL property must change to “RegistrationUrl” to match the data, otherwise an error will occur. Both sequenceUrl and eventUrl will be properties in the internally parsed data, so either can be used in the template below. And in fact, RegistrationUrl could be used instead. However, eventUrl is a special property that causes the eventId={id from the data} to be appended to the URL. That way, the website (or Forms Builder Sequence) you send it to can know which event was clicked on and can look up other information about the event.
<div class="event-template"> <p> <span class="event-template-title">#: title #</span> <span class="event-template-url"> <a href="#= eventUrl #" target="_top">Registration</a> </span> </p> <p> <span class="event-template-description">#: description #</span> </p> </div>
That should be enough to view a calendar with some events on it.
