# 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
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.

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

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

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

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

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

<pre class="language-javascript"><code class="lang-javascript">eventArgs.details.title = eventArgs.details.myTitle;
eventArgs.details.start = eventArgs.details.myStart;
<strong>eventArgs.details.end = eventArgs.details.myEnd;
</strong>eventArgs.details.resourceId = eventArgs.details.myRoomId; //set resourceId to assing the event to a resource
</code></pre>

### 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
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.<br>

For the full documentation see this: [Link](https://fullcalendar.io/docs/view-object)

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


---

# 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://gebra-it.gitbook.io/wiki/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.