brixxbox Wiki
Ask or search…
K

FullCalendar

Calendar

This Control provides an outlook like calendar.

Demo

Usage examples

Setting a date to a calendar control scrolls to that date.
brixxApi.setFieldValue("myCalendarControl", "2019-01-31");

Sub Settings

The Calendar supports sub settings to set. You can add resource(s) to the calendar for example:

Resources

You can add resources to your calendar by using the setFieldValue comand. To see and use them, you have to enable to resource views in the control view properties.
//Resources will delete all and set a new array of resources
brixxApi.setFieldValue("myCalendarControl.resources", [
{
id: 1,
title: "Room A",
},
{
id: 2,
title: "Room B",
}]);
//resource will add a single resource
brixxApi.setFieldValue("myCalendarControl.resource", {
id: 1,
title: "Room A",
mySortCrit: 100
});
Resources can be grouped. You need a grouping criteria in your resources and you must tell the calendar the name of this criteria. The order of both operations does not matter.
//Set the grouping criteria
brixxApi.setFieldValue("myCalendarControl.resourceGroupField", "building");
//Add the resources
brixxApi.setFieldValue("myCalendarControl.resources", [
{
id: 1,
building "Main building",
title: "Room A",
},
{
id: 2,
building "Main building",
title: "Room B",
},
{
id: 3,
building "Side building",
title: "Room C",
},
{
id: 4,
building "Side building",
title: "Room D",
}
]);
The width of the resource side panel can be set as well. Can be specified as a number of pixels, or a CSS string value, like "25%".
brixxApi.setFieldValue("myCalendarControl.resourceAreaWidth", "30%")
You can sort the resourceList by a setFiedlValue command as well.
brixxApi.setFieldValue("myCalendarControl.resourceOrder", "title");
brixxApi.setFieldValue("myCalendarControl.resourceOrder", "-title"); //sort descending
brixxApi.setFieldValue("myCalendarControl.resourceOrder", "mySortCrit,title"); //sort by your custom resource property mySortCrit, then by title
To assing events to resources, set the resourceId property in the DataTransform event like the start or end time.
eventArgs.details.title = eventArgs.details.myTitle;
eventArgs.details.start = eventArgs.details.myStart;
eventArgs.details.end = eventArgs.details.myEnd;
eventArgs.details.resourceId = eventArgs.details.myRoomId; //set resourceId to assing the event to a resource

Views

You can switch to a specific view mode by calling a set value. The following view modes are available, but might be restricted to your control settings.
  • dayGridMonth
  • timeGridWeek
  • timeGridDay
  • listWeek
  • resourceTimeline
  • resourceTimelineWeek
  • resourceTimeGridDay
brixxApi.setFieldValue("myCalendarControl.view", "resourceTimeline");
Last modified 1yr ago