> For the complete documentation index, see [llms.txt](https://docs.servoy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.servoy.com/guides/develop/application-design/ui-components/specialized-components/home-2/migrating-calendar-from-smart-and-web-client-to-ng-client.md).

# Migrating calendar from Smart and Web client to NG client

NOTE: this page is a reference for who is migrating from the Smart and Web client version of the fullcalendar to the NG version.

The Web and Smart version of the fullcalendar, which was based on the javaFX panel, should be replaced with the fullcalendar web component in the NG Client. The Calendar NG Component API forare mostly back-compatible with the Smart and Web client version.

The initialization of the Calendar is slightly different in NG; read the documentation on how to use the Calendar NG Component.

In the Calendar NG Component most of the extra features that have been implemented for the Smart and Web client version of the calendar component have been deprecated; built-in feature of the fullcalendar library are used instead.

## Resources

Allow to use a calendar Resource View type which renders all the events related to the existing resources on the selected Date.\
The resourceView type has deprecated in favour of the fullcalendar Scheduler.\
See the Calendar Resources section for detailed documentation about the Scheduler.

## Annotations

Annotations Object are placed on the Agenda views slots. Use annotations to mark a specific timeslot and to change background color for the specified period.

The annotations objects are deprecated in the NG version of the calendar component. Instead of annotations object the developer can use the calendar option businessHours or add to the calendar event objects as background events.

The businessHours is used to emphasizes a specific time block in the agenda views. The businessHours is defined as a JSON object which may have any of the following properties

**start** The date/time the businessHours begins\
**end** The date/time an businessHours ends. Required\
**dow** The days of the week the businessHours is applied

```javascript
var options = {
        eventSources: [events: [{ title: "lunch event", start: new Date(), id: 1 }]],
		businessHours: {
				start: new scopes.svyDateUtils.DateTime().toStartOfDay().addHours(9).date,
				end: new scopes.svyDateUtils.DateTime().toStartOfDay().addHours(17).date,
				dow: [1,2,3,4,5] // Apply businessHours Monday to Friday
		}
}
elements.calendarElementName.fullcalendar(options);
```

Events that appear as background highlights can be achieved by setting an Event Object's rendering property to background.\
Background events that are timed will only be rendered on the time slots in agenda view. Background events that are all-daywill only be rendered in month view or the all-day slots of agenda view.

The color of background events can be manipulated by targeting the fc-bgevent className, one of your own custom classNames provided by the Event Object's className property, or by explicitly specifying a color with each Event Object's orEvent Source's color or backgroundColor properties.

It is possible to define daily or weekly recurring events. Use Duration-ish times in the Event Object's start and endproperties, or use the dow property. See businessHours for more information. For further details read the fullcalendar documentation on Background Events.

## Event rightClick

Triggered when the user right clicks an event.\
The eventRightClick is an event of the calendar component.

```javascript
function( eventObject, event, view ) { }
```

**eventObject** is an Event Object that holds the event's information (date, title, etc).\
**event** the JSEvent that triggered the action.\
**view** holds the current View Object.

## Calendar dayRightClick (deprecated)

Triggered when the user right clicks on a Day.

This event has been deprecated and is not supported in the NG version of the calendar component.

## Timeline

Show the current time as a red line in the calendar view.\
The calendar option showCurrentTimeline has been deprecated and replaced by the new calendar option nowIndicator.

Default: false

```javascript
var options = {
        eventSources: [events: [{ title: "lunch event", start: new Date()}]],
		nowIndicator: true
}
elements.calendarElementName.fullcalendar(options);
```

Use CSS to style the .fc-now-indicator border-color and change the timeline color

```css
/*CSS to customize timeline*/
.fc-now-indicator {
	border-color: blue;
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.servoy.com/guides/develop/application-design/ui-components/specialized-components/home-2/migrating-calendar-from-smart-and-web-client-to-ng-client.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.