Docs
ServoyCloudSupportSamplesOpen SourceCommunity
  • Home
  • GUIDES
    • Platform Overview
    • Get Servoy
    • Get Started
      • Chapter 0
      • Chapter 1
      • Chapter 2
      • Chapter 3
      • Chapter 4
      • Chapter 5
    • Get Help
      • SuLA Instructions
      • SuLA Terms
    • Develop
      • Application Design
        • Forms
          • Layout Management
            • Simple Layout
            • Fully Responsive
              • Bootstrap 12-Grid
              • Flexbox
              • Custom Div
              • Collapsible Container
              • Simple Collapsible
              • Center Container
              • Inline Group Container
            • Abstract Form
          • Form Containers
            • Form Container
            • Tab Panel
            • Split Pane
            • Collapse
            • Accordion Panel
            • Form Component
            • List Form Component
          • Form Inheritance
          • Form Components
        • UI Components
          • Buttons and Text
            • Badge
            • Button
            • Data Label
            • Dropdown
            • Image
            • Label
          • Grids
            • Data Grid
            • Power Grid
            • Table
          • Input Controls
            • Calendar
            • Calendar Inline
            • Checkbox
            • Choice Group
            • Combobox
            • Group Buttons
            • Html Area
            • Input Group
            • Rating
            • Slider
            • Switch
            • Spinner
            • TextArea
            • Textbox
            • TextBoxGroup
            • Type Ahead
            • select2tokenizer
          • Media
            • Carousel
            • Embedded YouTube
            • File upload
            • Image label
            • Lightbox Gallery
            • MultiFile Upload
            • PDF JS Viewer
            • PDF Viewer
          • Mobile
            • Native Data List
            • Native Select
          • Navigation
            • Breadcrumbs
            • Navbar
            • sidenav
          • Visualization
            • DBTreeview
            • Progress Bar
            • Treeview
            • ChartJS
              • Data Labels Plugin
              • Funnel Chart
              • OutLabels Plugin
              • TreeMap
          • Specialized Components
            • Smart Document Editor
            • Servoy PDF Viewer
            • Fullcalendar Component
              • Fullcalendar
              • Fullcalendar Events
              • Migrating calendar from Smart and Web client to NG client
            • Fullcalendar Component 2
            • Canvas
            • Google Charts
            • Google Maps
            • svySignature
            • svywebcam
        • Styling and Themes
          • Default Theme Properties
          • CSS / LESS
          • Component Variants
          • Font Icons
        • Data Modeling
          • Databases
            • Tables
              • Columns
              • Calculations
              • Aggregations
              • Methods
              • Events / Triggers
              • Table security
            • Views
            • Procedures
          • Relations
          • Value Lists
          • Menus
          • In-Memory Databases
          • View Datasource
        • Modular Design
      • Programming Guide
        • Scripting the UI
          • Scripting Forms
          • Interacting with Components
          • Navigation
          • Windows, Dialogs and Popups
          • Events Manager
        • Working with Data
          • Concepts
          • Loading
          • Sorting
          • Iterating
          • Searching
            • Find mode
            • Query Builder
            • SQL String
          • Filtering
          • Editing
          • Validation
        • Automation and Scheduling
          • Batch Processor
          • Headless API
          • Scheduler API
        • Creating REST APIs
        • Consuming Webservices
        • Working with Files
          • File Plugin Basics
          • Images
          • Excel
          • PDF
          • JSON
        • Browser Utilities
          • Notifications
            • Web Notifications (Toastr)
            • Web Notifications (Native)
            • Block UI
          • Session Management
          • Keyboard Utilities
          • NG Utils
        • Sending and Receiving Email
        • Servoy Jasper Reports
          • Display Mode
          • Input Type
          • Jaspe Reports Viewer
          • Output format
        • Extensions
          • Modules
            • svyPhonegap
              • First Use Guide
              • Barcode Scanner
              • Browser
              • Camera
              • File
              • Fingerprint
              • Location
              • Network Interface
              • Phonegap
              • Printer
              • Push Notifications
            • svyAPI
              • Getting Started
            • svyLookup
              • Custom Templates
              • API Documentation
              • svyLookup v1
                • API Documentation v1.0.0
                • Base Form svyLookupTable v1.0.0
                • Base Form AbstractLookup v1.0.0
            • svyNavigation
              • API Documentation
                • API svyNavigation
                • API svyNavigationHistory
                • API svyNavigationUX
            • svyPopupFilter
              • Simple Filter Pickers
              • Custom Templates
              • API Documentation
                • API svyToolbarFilter
                • API svyPopupFilter
              • API Documentation v1
                • API svyToolbarFilter v1
                • API svyPopupFilter v1
            • svySearch
            • svySecurity
              • Overview
              • Token-based Auth and SSO (NEW!)
              • API Documentation
              • Getting Started
              • Tenant replication
              • Security Management Console
                • Classic Security Management Console
              • svySecurityUX
              • svyProperties
              • API Doc svyProperties
            • svyUtils
              • Log Manager
              • Log Manager Appenders
              • Smart Doc Editor Utils
              • Custom Dialogs
              • Excel Utils
                • Full API Reference
              • Crypto Utils
      • Security
        • Authentication
        • Permissions
          • UI Permissions
          • Data Permissions
          • Runtime Permissions
        • Audit Logging
        • OAuth
        • JWT
      • Multi-Language Support
      • Mobile Development
        • Getting Started
        • Mobile Design
        • Native Mobile Integrations
        • Building a Native Binary for the App Store
      • Native Desktop Development
        • NGDesktop UI plugin
        • NGDesktop Utils
        • NGDesktop File Plugin
    • Deploy
      • WAR Deployment
      • Docker Deployment
      • Server Configuration
        • Server Settings
        • Server Plugins
        • Database Servers
          • Locks
          • Transactions
          • Oracle
          • SQLServer
        • Client Sessions
        • Batch Processors
        • License Management
        • Monitoring
          • Server Log
          • Browser Console Log
          • Websocket Log
          • Query Performance
          • Client Performance
          • Client Event Tracing
          • Monitoring Servoy with JMX
      • NGClient deployment
      • Troubleshooting
      • Other Topics
        • Security: Cross-site Scripting
        • Running in an iFrame
    • Extend
    • Contribute
  • Reference
    • Servoy Core
      • Object Model
        • Database Server
          • Table
            • Aggregation
            • Calculation
            • Column
            • Method
          • View
          • Procedure
        • Solution
          • Form
          • Form Component
          • Relation
          • Relation Item
          • Table Node
          • Value List
          • Menu
          • Menu item
          • In-Memory Data Source
          • View Foundset Data Source
          • Variable
          • Column Info
          • Media
          • Layout Container
          • Method
        • i18n Message Key
      • Developer API
        • Globals
        • Forms
          • RuntimeForm
            • controller
            • containers
              • RuntimeContainer
            • elements
              • Component
              • RuntimeAccordionPanel
              • RuntimeBean
              • RuntimeButton
              • RuntimeCalendar
              • RuntimeCheck
              • RuntimeCombobox
              • RuntimeComponent
              • RuntimeDataButton
              • RuntimeDataLabel
              • RuntimeGroup
              • RuntimeHtmlArea
              • RuntimeImageMedia
              • RuntimeInsetList
              • RuntimeLabel
              • RuntimeListBox
              • RuntimePassword
              • RuntimePortal
              • RuntimeRadio
              • RuntimeChecks
              • RuntimeRadios
              • RuntimeRectangle
              • RuntimeRtfArea
              • RuntimeSpinner
              • RuntimeSplitPane
              • RuntimeTabPanel
              • RuntimeTextArea
              • RuntimeTextField
              • RuntimeWebComponent
        • JS Lib
          • Array
          • BigInt
          • Boolean
          • Date
          • Function
          • IterableValue
          • Iterator
          • JSON
          • Map
          • Math
          • Namespace
          • Number
          • Object
          • Promise
          • QName
          • RegExp
          • Set
          • Special Operators
          • Statements
          • String
          • XML
          • XMLList
        • Application
          • APPLICATION_TYPES
          • CLIENTDESIGN
          • CSSPosition
          • DRAGNDROP
          • ELEMENT_TYPES
          • JSBounds
          • JSDimension
          • JSDNDEvent
          • JSEvent
          • JSLogBuilder
          • JSLogger
          • JSPoint
          • JSUpload
          • JSWindow
          • LOGGINGLEVEL
          • NGCONSTANTS
          • Renderable
          • UICONSTANTS
          • UUID
        • SolutionModel
          • ALIGNMENT
          • ANCHOR
          • BEVELTYPE
          • CURSOR
          • DEFAULTS
          • FONTSTYLE
          • MEDIAOPTION
          • PAGEORIENTATION
          • PRINTSLIDING
          • SCROLLBAR
          • TITLEJUSTIFICATION
          • TITLEPOSITION
          • UNITS
          • JSBean
          • JSButton
          • JSCalculation
          • JSChecks
          • JSCombobox
          • JSComponent
          • JSDataSourceNode
          • JSField
          • JSForm
          • JSHeader
          • JSInsetList
          • JSLabel
          • JSLayoutContainer
          • JSList
          • JSMedia
          • JSMethod
          • JSPart
          • JSPassword
          • JSPortal
          • JSRadios
          • JSRelation
          • JSRelationItem
          • JSResponsiveLayoutContainer
          • JSStyle
          • JSTab
          • JSTabPanel
          • JSText
          • JSTextArea
          • JSTitle
          • JSValueList
          • JSVariable
          • JSWebComponent
        • Database Manager
          • JSBaseFoundset
          • JSBaseRecord
          • JSBaseSQLFoundset
          • JSBaseSqlRecord
          • JSColumn
          • JSDataSet
          • JSFoundSet
          • JSFoundSetUpdater
          • JSRecord
          • JSRecordMarker
          • JSRecordMarkers
          • JSTable
          • JSTableFilter
          • MenuFoundSet
          • MenuItemRecord
          • QBAggregate
          • QBAggregates
          • QUERY_COLUMN_TYPES
          • SQL_ACTION_TYPES
          • QBCase
          • QBCaseWhen
          • QBColumn
          • QBColumns
          • QBCondition
          • QBFunction
          • QBFunctions
          • QBGroupBy
          • QBJoin
          • QBJoins
          • QBLogicalCondition
          • QBParameter
          • QBParameters
          • QBPart
          • QBResult
          • QBSearchedCaseExpression
          • QBSelect
          • QBSort
          • QBSorts
          • QBTableClause
          • QBWhereCondition
          • ViewFoundSet
          • ViewRecord
        • Events Manager
          • EVENTS_AGGREGATION_TYPES
          • EventType
        • Menus
          • JSMenu
          • JSMenuItem
        • JSMenuDatasource
        • Utils
        • Client Utils
          • JSBlobLoaderBuilder
        • History
        • Security
        • i18n
        • ServoyException
          • DataException
        • JSUnit
        • Datasources
          • DBDataSource
          • DBDataSourceServer
          • JSConnectionDefinition
          • JSDataSource
          • MemDataSource
          • MenuDataSource
          • SPDataSource
          • SPDataSourceServer
          • ViewDataSource
        • JSViewDatasource
        • servoyDeveloper
        • enum
    • Extensions
      • UI Components
        • Buttons and Text
          • Badge
          • Button
          • Data Label
          • Drop Down
          • Image
          • Label
        • Form Containers
          • Accordion Panel
          • Collapse
          • Default Loading Indicator
          • Error Bean
          • Form Component Container
          • Form Container
          • List Form Component
          • Portal
          • Responsive Container
          • Servoy Default Navigator
          • Slider
          • Split Pane
          • TabPanel
        • Grids
          • Data Grid
          • Power Grid
          • Table
        • Input Controls
          • Calendar
          • Calendar Inline
          • Checkbox
          • Choice Group
          • Combobox
          • Floatinglabel Calendar
          • Floatinglabel Combobox
          • Floatinglabel Textarea
          • Floatinglabel Textbox
          • Floatinglabel Type Ahead
          • Group Buttons
          • Html Area
          • Input Group
          • Rating
          • Select2tokenizer
          • Slider
          • Spinner
          • Switch
          • TextArea
          • TextBox
          • TextBox Group
          • Type Ahead
        • Media
          • Carousel
          • Embedded YouTube
          • File upload
          • Image label
          • Lightbox Gallery
          • MultiFile Upload
          • PDF JS Viewer
          • PDF Viewer
        • Mobile
          • Native Data List
          • Native Select
        • Navigation
          • Breadcrumbs
          • Navbar
          • sidenav
        • SmartDocEditor
          • Smart Document Editor
        • Visualization
          • Canvas
          • Chart
          • Custom List
          • DBTreeview
          • Foundset List
          • Fullcalendar
          • Gauge
          • Google Maps
          • Kanban
          • Progress Bar
          • Treeview
      • Server Plugins
        • amortization
          • AmortizationCalculation
          • Polynomial
        • clientmanager
          • Broadcaster
          • JSClientInformation (cm)
        • excelxport
        • file
          • JSFile
          • JSProgressMonitor
        • headlessclient
          • JSClient
        • http
          • Cookie
          • DeleteRequest
          • GetRequest
          • HeadRequest
          • HTTP_STATUS
          • HttpClient
          • HttpClientConfig
          • JSFileUpload
          • OptionsRequest
          • PatchRequest
          • PostRequest
          • PutRequest
          • Response
          • TraceRequest
        • images
          • JSImage
        • jwt
          • Algorithm
          • Builder
          • JWTClaims
        • mail
          • Attachment
          • MailMessage
        • maintenance
          • JSClientInformation
          • JSColumnObject
          • JSServer
          • JSTableObject
        • mobileservice
          • OfflineDataDescription
        • oauth
          • ClientAuthentication
          • CustomApiBuilder
          • OAuthProviders
          • OAuthRequest
          • OAuthResponse
          • OAuthResponseBinary
          • OAuthResponseJSON
          • OAuthResponseText
          • OAuthService
          • OAuthServiceBuilder
          • OAuthTokenExtractors
          • RequestType
        • pdf_output
        • rawSQL
        • RestWs plugin
        • rest_ws
          • WsContents
          • WsCookie
          • WsRequest
          • WsResponse
        • scheduler
        • serialize
        • textxport
          • DataProviderExport
          • TabExporter
        • udp
          • JSPacket
        • XmlReader
          • XmlNode
      • Browser Plugins
        • Block UI
        • Block UI (ref)
        • Dialogs Plugin
        • Idle
        • Idle (ref)
        • Key Listener
        • Key Listener (ref)
        • NGDesktop File
        • NGDesktop File (ref)
        • NGDesktop UI (ref)
        • NGDesktop Utils (ref)
        • NG Utils (ref)
        • Office Javascript API for Servoy
        • Phonegap
        • Web Notifications (Native)
        • Web Notifications (Toastr)
        • Window Plugin
        • Font Awesome
      • Modules
        • Smart Doc Editor Utils
        • svyAPI
          • Getting Started
        • svyLookup
          • Custom Templates
          • API Documentation
          • svyLookup v1
            • API Documentation v1.0.0
            • Base Form svyLookupTable v1.0.0
            • Base Form AbstractLookup v1.0.0
        • svyLookupExample
        • svyNavigation
          • API Documentation
            • API svyNavigation
            • API svyNavigationHistory
            • API svyNavigationUX
        • svyNavigationUX
        • svyNavigationUXSample
        • svyPopupFilter
          • Simple Filter Pickers
          • Custom Templates
          • API Documentation
            • API svyToolbarFilter
            • API svyPopupFilter
          • API Documentation v1
            • API svyToolbarFilter v1
            • API svyPopupFilter v1
        • svyProperties
        • svySearch
        • svySecurity
          • Overview
          • Token-based Auth and SSO (NEW!)
          • API Documentation
          • Getting Started
          • Tenant replication
          • Security Management Console
            • Classic Security Management Console
          • svySecurityUX
          • svyProperties
          • API Doc svyProperties
        • svySecurityConsole
        • svySecurityUX
        • svyUtils
          • Log Manager
          • Log Manager Appenders
          • Smart Doc Editor Utils
          • Custom Dialogs
          • Excel Utils
          • Full API Reference
          • Crypto Utils
        • svyUtils$Excel
        • svyUtils$NGClient
        • svyUtils$customDialogs
        • svyUtils$logManagerAppenders
        • svyUtils$tableGrid
      • Layout
        • Boostrap 12grid layout
          • Collapsible Container
          • Simple Collapsible
          • Center Container
          • Inline Group Container
          • Flexbox Layout
      • Solutions
        • Sample Application
          • Tutorial Part 1
          • Tutorial Part 2
      • Packages
        • UI Component Packages
          • Advanced Renderers
          • Bootstrap Components
          • Bootstrap Extra Components
          • Canvas
          • Chart JS
          • Fullcalendar Component
          • googlemaps
          • kanban
          • Servoy Core
          • Servoy Extra Components
          • Servoy NG-Grids
          • Servoy PDF Viewer
          • smartDocumentEditor
        • Browser Plugin Packages
          • Block UI
          • Core NG only Services
          • Key Listener
          • NGDesktop File
          • NGDesktop UI
          • NGDesktop Utils
          • Web Notifications
          • Idle Web Service
    • Servoy Developer
      • Menu
        • File
        • Edit
        • Source
        • Refactor
        • Navigate
        • Search
        • Project
        • Actions
        • Run
        • Window
        • Help
      • Toolbar
      • Solution Explorer
        • Resources
          • Database Servers
            • Database Server
              • Procedures
              • Tables
              • Views
          • Security
          • i18n
        • All Solutions
          • Solution
          • Active Solution
            • Scopes
              • Scope
                • Variables
            • Forms
              • Working Set
              • Form
                • Controller
                • Variables
                • Elements
                • Relations
            • Form Components
              • Form Component
            • Relations
              • Relation
            • ValueLists
              • ValueList
            • Menus
              • Menu
                • MenuItem
            • Media
              • Folder
              • File
            • DataSources
              • In Memory DataSources
                • In Memory DataSource
              • View Foundsets DataSources
                • View Foundset DataSources
            • Servoy Packages
              • Package
            • Modules
              • Module
        • Solution Explorer Contextual List
      • Views
        • Command Console
        • Console
        • Problems
        • Tasks
        • Bookmarks
        • Search
        • Form Hierarchy
        • Help
        • JUnit
        • Outline
        • Profiler
        • Properties
        • Project Explorer
        • Call Hierarchy
      • Editors and Wizards
        • Property configurator for columns
        • Relation Editor
        • Text Format Editor
        • Date Format Editor
        • Number Format Editor
        • Database Synchronization Wizard
        • Security Editor
        • SQL Editor
        • i18n Editor
        • File Import Wizard
        • File Export Wizard
        • WAR Export Wizard
        • NGDesktop Export Wizard
        • Table Editor
        • Metadata Synchronization Wizard
        • Database Server Connection Editor
        • Text Property Editor
        • Valuelist Editor
        • Form Editor
          • Parts of the Form Editor
          • Designing a Form
          • Layout Tools
          • Using Containers
          • Creating and Using Forms
          • Using Servoy Beans
          • Using Shapes
          • Form Editor Subtabs
          • [Tips and Shortcuts][reference/servoy-developer/object-editors/form-editor-tips_and_shortcuts.md]
          • Editong a Responsive LayoutForm
          • CSS Positioning
        • Form Hierarchy
        • Component Properties Editor
        • Variable Editor
        • Method Selection Wizard
        • New Solution Wizard
        • Application Event Types Editor
        • New Form Wizard
        • Form Dataproviders Configurator
        • Servoy Resource Locator
        • Datasource Selection Wizard
        • Sorting Fields Wizard
        • Scripting Editor
          • Getting Started-Overview of Script Editor
          • Code Writing Features
          • Code Navigation
          • Code Rewriting Tools
          • Refactoring
          • Code Formatting
          • Script Editor Tips and Shortcuts
          • Unit Tests
        • Theme Editor
          • General Properties
          • Sidenav Properties
          • Navbar Properties
          • Tabs Properties
          • Windows Properties
          • Dialogs Properties
          • Tables Properties
          • Breadcrumb specific style Properties
          • Brand colors Properties
          • Validations Properties
          • Margins and Padding Properties
        • Editor Selection
        • Run Configurations
        • Debug Configurations
        • Externalize Strings Wizard
        • Font Chooser Wizard
        • Color Chooser Wizard
        • Project Properties Configurator
        • Move Wizard
        • External Tools Configurations
        • About Servoy Developer
        • Servoy Developer Installation Details
        • Eclipse Marketplace Wizard
        • Install Available Software Wizard
        • Cheat Sheet Selection Wizard
        • Servoy Developer Help Wizard
        • Switch to Editor Wizard
        • Find Actions Wizard
        • Customize Perspective Configurator
        • Quick Search Wizard
        • Search Wizard
        • Encoding Wizard
        • Task Wizard
        • Find - Replace Wizard
        • Properties Editor
        • New Project Wizard
        • New Method Wizard
        • New Menu Wizard
          • New MenuItem Wizard
        • Menu Editor
        • ServoyMenu Selection Wizard
        • JSMenu compatible component selector
        • Permissions Configuration Dialog
      • Project File Structure
        • Servoy Installation Directory
          • servoy.properties
        • Workspace Folder
          • Resources Directory
            • Database Information (.dbi) Files
          • Solution Folder
      • Package Manager
      • Preferences
      • Property Types for components / services
      • Debugger
        • Debug Explorer
        • Breakpoints
          • Breakpoint Properties
        • Variables
        • Expressions
        • Interactive Console
    • Application Server
    • Servoy Cloud
      • Cloud Control Center
        • Home
          • Setup Namespace
          • User profile
            • My Profile
            • Support
        • Download IDE
        • Application Overview
          • Applications
            • Pipelines
              • Jobs
                • Packages
                  • Commits
                  • Artifacts
                  • Configuration
                  • Quality reports
                  • Build markers
                • Job Configuration
                  • Build and Deploy or Build
                  • Mobile
                  • Desktop
            • Environments
              • Metrics
                • Users
                • Databases
                  • Metrics
                • System Health
                • Log Activity
                • App performance
                • Query performance
              • Cloud reporting
            • Security
              • Permissions
              • Tenants
            • Reports
            • Security Login Designer
              • Single Sign-On
                • Sign in with Google
                • Sign in with Microsoft
          • Code Repositories
        • Project Management
          • Tickets
          • Backlog
          • Active Sprints
        • User Management
          • Users
          • Roles
        • Administration
          • Security
            • ServoyCloud Roles
          • Credentials
          • Settings
        • Add-Ons
      • Database Backup
      • E2E Cypress Testing
        • Using Cypress
      • On-Premise Deployment
      • Privacy policy (ServoyAI)
      • FAQ
      • Migrate to Servoy Cloud
    • Extensions Developement
      • Component and Services
        • Component Development
        • Service Development
        • Tools and Dev Tips to use for Component/Service developement
        • Manifest (.mf file)
        • Specification (.spec file)
          • Property Types
            • Array property types
            • Custom object property types
            • Findmode property type
            • Foundset property type
            • Tags
        • Directives And Filters
          • Sablotabsequence
        • Console (serverside)
        • ServoyApi (serverside)
      • Serverside Plugins
        • Data Convertors and Validators
        • UI Convertors
  • Release notes
    • Release notes
      • 2025.06
      • 2024.03 (LTS)
      • 2023.03 (LTS)
      • 2025.03 (Servoy Cloud)
      • 2025.03
      • 2024.12
      • 2024.12 (Servoy Cloud)
      • 2024.09
      • 2024.09 (Servoy Cloud)
      • 2024.06
      • 2024.06 (Servoy Cloud)
      • 2024.03 (Servoy Cloud)
      • 2023.12
      • 2023.12 (Servoy Cloud)
      • 2023.09
      • 2023.09 (Servoy Cloud)
      • 2023.06
      • 2022.03 (LTS)
      • 2022.12 What's new
      • 2022.12
      • 2022.09 What's new
      • 2022.09
      • 2022.06 What's new
      • 2022.06
      • 2021.03.3 (LTS)
Powered by GitBook
On this page
  • Event Object
  • Event Source Object
  • Event Property Summary
  • Event Source Property Summary

Was this helpful?

  1. GUIDES
  2. Develop
  3. Application Design
  4. UI Components
  5. Specialized Components
  6. Fullcalendar Component

Fullcalendar Events

PreviousFullcalendarNextMigrating calendar from Smart and Web client to NG client

Last updated 1 year ago

Was this helpful?

Event Object

An is a javascript Object which store information about a calendar event. The calendar component renders calendar event as Event Objects.

An Event Object must have a "start" date property and a "title", it has other optionals properties which might modify it's behavior and it's style on the calendar component. Use the "data" property to add any other custom property to the event as "description", "location" and any other information that might be useful to the developer.

var event = {
	title: "lunch event",
	start: new Date(),
	allDay: false,
	editable: true,
	data : {
       description : "This is an event object", 
       location: "Amsterdam"
    }
}

Event Source Object

An is a javascript Object that provides Event data to the FullCalendar. It can be seen as a collection of Events. The Events associated to an EventSource inherit it's properties if are not specified in the event itself. For example an EventSource having set "yellow' as "backgroundColor**" **will color as yellow all the associated Events except of those having set their own "backgroundColor" property.

The Calendar component differentiates between different EventSource Types, depending on how Events are returned to the Fullcalendar.

  • **ArrayEventSourceType **feeds the calendar with an Array of Event Objects.

  • FunctionEventSourceType uses a Servoy function to feed the calendar with a collection of Event Objects. Any time the user navigates dates and/or calendar views the calendar will execute the events function to fetch Event Objects. The function must return an Array of EventType Objects. Set optional properties in the "data" property of the eventSource to use it as a filter parameters in the function feed.

  • **GoogleCalendarEventSourceType **retrieves calendar event from a public Google Calendar feed. See the specific for further details.

// ArrayEventSourceType sample
/**
 * @type {svy-fullcalendar.EventSourceType}
 */
var arrayEventSource = {
	events: [{
    	title: "source event",
		start: new Date(),
		allDay: true
	}],
	color: 'yellow'
}

// FunctionEventSourceType sample
/**
 * @type {svy-fullcalendar.EventSourceType}
 */
var functionEventSource = {
	events: fetchFunction,
	data: {search: 'Amsterdam'},
	color: 'green',
	ignoreTimezone: false
};

/** 
 * @param {Date} start
 * @param {Date} end
 * @param {Object<String>} [data] optional object to be used as filter parameters in fetching events
*/ 
function fetchFunction(start, end, data) {
 var foundset = databaseManager.getFoundSet("db:/yourserver/yourtable");
 // search data based on your search criteria
    if (foundset.find()) {
		if (data.search) foundset.location = data.search
        foundset.start_date = '>= ' + utils.dateFormat(scopes.svyDateUtils.toStartOfDay(new Date(start)), 'dd/MM/yyyy HH:mm:ss') + '|dd/MM/yyyy HH:mm:ss';
	    foundset.end_date = '<= ' + utils.dateFormat(scopes.svyDateUtils.toEndOfDay(new Date(end)), 'dd/MM/yyyy HH:mm:ss') + '|dd/MM/yyyy HH:mm:ss';
		foundset.search();
    }
	var events = []
    for (var i=1; i<=foundset.getSize(); i++ ) {
		var rec = foundset.getRecord(i)
		// Note: is up to the developer map a datasource to an event object
		events.push({
			start : rec.startDate,
			title :	rec.yourTitle,
			location: rec.location
		});
    }
	return events;
}

Populate the calendar

Use the calendar API renderEvent and addEventSource to render new events at any time without forcing a re-create of the calendar, or the removeEvents and removeEventSources to remove them from the calendar component.

// populate the calendar providing events and eventSources to the constructor
var options = {
		eventSources: [{
			functionEventSource,
            arrayEventSource
		}]
	}
elements.fullcalendar.fullCalendar(options);

The API to remove event and eventSource requires the event id or eventSource id. If you haven't set any id to the event or eventSource object you won't be able to remove it.

// add an eventSource to a Fullcalendar Object
var eventSource = {
            id : 1,
			events: [{
				title: "green source event",
				start: new Date(),
			}],
			color: 'green'
	}
calendar.addEventSource(eventSource);

// remove the eventSource using the eventSource id
calendar.removeEventSource(1);

Update Event and EventSource

Call the FullCalendar method **updateEvent **to update an Event which is visible on the calendar. Provide the updated Event object to the API. To update successfully the event the developer must have used an unique id for the event object. The updateEvent API will return false if the id is not provide or if the event is not visible.

To update an eventSource the developer should remove the eventSource from the calendar using **removeEventSource **and add the updated eventSource using the method addEventSource.

NOT SUPPORTED. To update an eventSource developer can modify the original EventSource Object and call the methods **rerenderEvents **to make a change visible in the calendar and the method refetchEvents in case events has been added or removed from the EventSource Object.

Display icon in the event object

Display a specific icon in the calendar event is a common use case. The FullCalendar component does not have an explicit property for event icons but such feature can be achieved using the **className **property of event or eventSource objects and CSS3 styling.

Use the CSS3 before or after pseudo-selector to place an icon before or after the event title (or event time). If you want to place the same icon on all the calendar events you can include the following CSS in your solution's CSS file.

/* display the icon before the title text */
.fc-event .fc-title:before {
	content: url('servoy16x16.png');  /* the icon is picked from the media folder of your Servoy solution */
}

/* display the icon before the event time */
.fc-event .fc-time:before {
	content: url('servoy16x16.png');  /* the icon is picked from the media folder of your Servoy solution */
}

If you want to display specific icon on specific events use the className property of the event object (or of the eventSource object if you want to display the same icon for all the events of the eventSource).

If your event has className equal to 'custom-icon' then your CSS should look like:

/* display the icon before the title text */
.fc-event.custom-icon .fc-title:before {
	content: url('servoy16x16.png');  /* the icon is picked from the media folder of your Servoy solution */
}

/* display the icon before the event time */
.fc-event.custom-icon .fc-time:before {
	content: url('servoy16x16.png');  /* the icon is picked from the media folder of your Servoy solution */
}

Font icons are often more effective then .png/.jpeg icons. You can easier control size color and other property of the icon from CSS. To use Font Icons include them in your solution's media folder and make sure are loaded togheter with your solution's styleSheet. You can simply use the same font icons content as in the example below:

/* display the glyphon calendar icon before the event time */
.fc-event .fc-time:before {
	font-family: 'Glyphicons Halflings';   /* use the glyphicons */
	content: "\e109";     /* the calendar icon to be displayed */
	padding: 0 3px;
}

/* display multiple icons at the same time for events having className icon-multiple*/
.fc-event.icon-multiple .fc-time:before {
	font-family: 'Glyphicons Halflings';   /* use the glyphicons */
	content: "\e109 \e023";     /* display calendar and time icon next to each other */
	padding: 0 3px;
}

Event Property Summary

id

String|Number Uniquely identifies the given event. Different instances of repeating events should all have the same id. Id is not a required property but is necessary to be able to update or remove the event on the calendar.

title

String The text shown on the event element. Required.

start

Date The date and time an event begins. Required.

end

Date The date and time an event ends.

allDay

className

String|Array A CSS class (or array of classes) that will be attached to this event's element.

data

Object A custom object which can be used to add custom properties to the event object.

resourceIds

Array Associate the event with the resource ids provided. Scheduler feature.

editable

Boolean The event will not be editble if set to false.

startEditable

Boolean

durationEditable

Boolean

overlap

Boolean

rendering

String Use value 'background' to render the event as a background event.

constraint

Object

color

Color

backgroundColor

Color

borderColor

Color

textcolor

Color

Event Source Property Summary

id

String|Number Uniquely identifies the given event source. Id is not a required property but is necessary to be able to remove the event source from the calendar without being force to redraw the calendar it self.

googleCalendarId

String The Google Calendar ID to be used to fetch the google calendar events. Do not set the "events" property if you are using the eventSource to fetch Google Calendar events.

googleCalendaApiKey

String The Google Calendar API Key which is required to allow the fetching of Google Calendar events.

className

Array A CSS array of classes that will be attached to this event's element.

data

Object A custom object which can be used to add custom properties to the event source object.

allDayDefault

Boolean Determines the default value for each Event Object's allDay property when it is unspecified.

editable

Boolean The event will not be editble if set to false.

startEditable

Boolean

durationEditable

Boolean

overlap

Boolean

rendering

String Use value 'background' to render the event as a background event.

constraint

Object

color

Color

backgroundColor

Color

borderColor

Color

textColor

Color

Populate the calendar with and/or . Provide the events and eventSources to the FullCalendar constructor to populate the calendar as soon it's rendered.

Boolean Whether an event occurs at a specific time-of-day. This property affects whether an event's time is shown. Also, in the agenda views, determines if it is displayed in the "all-day" section. If this value is not explicitly specified, will be used if it is defined.

Event
EventSource
Google Calendar docs
Event Object
EventSource Object
allDayDefault