# new Calendar(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the following methods:
Create the Web Component and call its init method:
const myCalendar = document.createElement("a-calendar").init(config)
Or use the shorthand for it:
const myCalendar = createCalendar({
id: "my-calendar",
color: "#00aaee",
collection: kiss.app.collections["meetings"],
// We can add custom methods, and also override default ones
methods: {
// Override the createRecord method
createRecord(model) {
// Create a record from this model
console.log(model)
},
// Override the selectRecord method
selectRecord(record) {
// Show the clicked record
console.log(record)
},
sayHello: () => console.log("Hello"),
}
})
myCalendar.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
date |
string
|
<optional> |
The initial date to display in the timeline (default = today) |
period |
string
|
<optional> |
"month" (default) | "3 weeks" | "2 weeks" | "1 week" | "1 week + details" |
startOnMonday |
boolean
|
<optional> |
|
showWeekend |
boolean
|
<optional> |
|
dateField |
string
|
The field to use as reference for the calendar |
|
timeField |
string
|
<optional> |
|
collection |
Collection
|
The data source collection |
|
record |
object
|
<optional> |
Record to persist the view configuration into the db |
columns |
Array.<object>
|
<optional> |
Where each column is: {title: "abc", type: "text|number|integer|float|date|button", id: "fieldId", button: {config}, renderer: function() {}} |
color |
string
|
<optional> |
Hexa color code. Ex: #00aaee |
showToolbar |
boolean
|
<optional> |
false to hide the toolbar (default = true) |
showActions |
boolean
|
<optional> |
false to hide the custom actions button (default = true) |
showSetup |
boolean
|
<optional> |
false to hide the setup button (default = true) |
canFilter |
boolean
|
<optional> |
false to hide the filter button (default = true) |
canSelectFields |
boolean
|
<optional> |
false to hide the button to select fields (default = true) |
canChangePeriod |
boolean
|
<optional> |
false to hide the possibility to change period (1 month, 2 weeks...) (default = true) |
canCreateRecord |
boolean
|
<optional> |
Can we create new records from the calendar? |
actions |
Array.<object>
|
<optional> |
Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}} |
width |
number
|
string
|
<optional> |
|
height |
number
|
string
|
<optional> |
this
Generated markup
<a-calendar class="a-calendar">
<div class="calendar-toolbar">
<!-- Calendar toolbar items -->
</div>
<div class="calendar-body">
<!-- Calendar entries here -->
</div>
</a-calendar>
Methods
# async setColor(newColor)
Update the calendar color (toolbar buttons + modal windows)
Parameters:
| Name | Type | Description |
|---|---|---|
newColor |
string
|
# showCalendar(date)
Show the calendar at a given date
Parameters:
| Name | Type | Description |
|---|---|---|
date |
date
|
string
|
Date given as a Date or an ISO date string like "2023-06-24" |
this
# showFieldsWindow()
Show the window just under the fields selector button
# showFilterWindow()
Show the window just under the filter button
# showSetupWindow()
Show the window to setup the calendar:
- source date field
- source time field
- prefered layout (1 month, 2 weeks, 1 week...)
- show week-ends
- week starts on monday