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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://brixxbox.gitbook.io/brixxbox-documentation/client-api-reference/controls/fullcalendar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.