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");