FullCalendar

Calendar

This Control provides an outlook like calendar.

Demo

Usage examples

Setting a date to a calendar control scrolls to that date.

app.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
app.setFieldValue("myCalendarControl.resources", [
  {
    id: 1,
    title: "Room A",
  },
  {
    id: 2,
    title: "Room B",
  },
]);

//resource will add a single resource
app.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
   app.setFieldValue("myCalendarControl.resourceGroupField", "building");

   //Add the resources
   app.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%".

app.setFieldValue("myCalendarControl.resourceAreaWidth", "30%");

You can sort the resourceList by a setFiedlValue command as well.

app.setFieldValue("myCalendarControl.resourceOrder", "title");
app.setFieldValue("myCalendarControl.resourceOrder", "-title"); //sort descending
app.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

app.setFieldValue("myCalendarControl.view", "resourceTimeline");

Access Information

You can access different information by using the app.getFieldValue() function.

• type: Name of one of the available views (a string).

• title: Title text that is displayed at the top of the headerToolbar (such as “September 2009” or “Sep 7 - 13 2009”).

• activeStart: A Date that is the first visible day. In month view, this value is often before the 1st day of the month, because most months do not begin on the first day-of-week.

• activeEnd: A Date that is the last visible day. Note: This value is exclusive. See how events are are parsed from a plain object for further details.

• currentStart: A Date that is the start of the interval the view is trying to represent. For example, in month view, this will be the first of the month. This value disregards hidden days.

• currentEnd: A Date that is the end of the interval the view is trying to represent. Note: This value is exclusive. See how events are are parsed from a plain object for further details. For example, in month view, this will be the day after the last day of the month. This value disregards hidden days.

For the full documentation see this: Link

// Calendar
let type = app.getFieldValue('calendar.type');
let title = app.getFieldValue('calendar.title')
let activeStart = app.getFieldValue('calendar.activeStart');
let activeEnd = app.getFieldValue('calendar.activeEnd');
let currentStart = app.getFieldValue('calendar.currentStart');
let currentEnd = app.getFieldValue('calendar.currentEnd');

/*
    type             dayGridMonth
    title            September 2024
    activeStart      2024-09-03T00:00:00
    activeEnd        2024-10-13T00:00:00
    currentStart     2024-09-01T00:00:00
    currentEnd       2024-10-01T00:00:00
 */