> For the complete documentation index, see [llms.txt](https://brixxbox.gitbook.io/brixxbox-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://brixxbox.gitbook.io/brixxbox-documentation/client-api-reference/controls/fullcalendar.md).

# FullCalendar

## **Calendar**

This Control provides an outlook like calendar.

### Demo

{% embed url="<https://youtu.be/iF6Gr29hr4U>" %}

### Usage examples

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

```javascript
   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.

```javascript
   //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.

```javascript
   
   //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%".

```javascript
   brixxApi.setFieldValue("myCalendarControl.resourceAreaWidth", "30%")
```

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

```javascript
   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.

```javascript
   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

```javascript
      brixxApi.setFieldValue("myCalendarControl.view", "resourceTimeline");
```