Link to plugin page: https://bubble.io/plugin/calendar-fullcalendar-431-1568094670817x101586880920813570
Demo to preview the settings
Introduction
Calendar is developed based on the API Fullcalendar 4.3.1 (https://fullcalendar.io).
Instructions
1. Install Skill Calendar plugin.
2. Add the SkillCalendar element to the page.
3. Enter group ID for the SkillCalendar.
4. Fill in the required fields.
- Insert the received API key into the plugin settings.
Plugin Elements
SkillCalendar Actions
Create Calendar
Create Calendar in Group (ID Attribute: Skill_Calendar )
Fields:
Title | Description | Type |
title list | event title 1, event title 2, event title 3, event title 4, .... event title n | text |
start list | event start 1, event start 2, .... event start n (formatted as custom yyyy-mm-dd'T'HH:MM:ss) | text |
end list | event end 1, event end 2, .... event end n (formatted as custom yyyy-mm-dd'T'HH:MM:ss) | text |
unique id list | event id 1, event id 2, event id 3, event id 4, .... event id n (1568114289546x441362971246100500) | text |
color list | List of color codes | text |
timeZone | Time zone | text |
locale | locale (en,af,ar-dz,ar-kw,ar-ly,ar-ma,ar-sa,ar-tn,ar,bg,bs,ca,cs,da,de,el,en-au,en-gb,en-nz,es,et,eu,fa,fi,fr,fr-ch,gl,he,hi,hr,hu,id,is,it,ja,ka,kk,ko,lb,lt,lv,mk,ms,nb,nl,nn,pl,pt-br,pt,ro,ru,sk,sl,sq,sr-cyrl,sr,sv,th,tr,uk,vi,zh-cn,zh-tw) | text |
defaultDate | Default date | date |
buttonIcons | Enable button icons | yes/no |
eventColor | Event color | text |
eventBackgroundColor | Event background color | text |
eventBorderColor | Event border color | text |
eventTextColor | Event text color | text |
Load Calendar
Downloading the library (css and js files) Fullcalendar 4.3.1 (https://fullcalendar.io)
Set Locale
Setting a new locale for the calendar
Title | Description | Type |
locale | locale (en,af,ar-dz,ar-kw,ar-ly,ar-ma,ar-sa,ar-tn,ar,bg,bs,ca,cs,da,de,el,en-au,en-gb,en-nz,es,et,eu,fa,fi,fr,fr-ch,gl,he,hi,hr,hu,id,is,it,ja,ka,kk,ko,lb,lt,lv,mk,ms,nb,nl,nn,pl,pt-br,pt,ro,ru,sk,sl,sq,sr-cyrl,sr,sv,th,tr,uk,vi,zh-cn,zh-tw) | text |
Load ButtonStyle
Set the color settings for the calendar buttons.
Fields:
Title | Description | Type |
color | Button color | text |
background-color | Background color | text |
border-color | Border color | text |
hover-color | Hover button color | text |
hover-background-color | Hover background color | text |
hover-border-color | Hover border color | text |
disabled-color | Disabled button color | text |
disabled-background-color | Disabled background color | text |
disabled-border-color | Disabled border color | text |
disabled-opacity | Disabled opacity | number |
active-color | Active button color | text |
active-background-color | Active background color | text |
active-border-color | Active border color | text |
Add Event
Create an event on the calendar
Title | Description | Type |
title | Event name | text |
start | Start date | text |
end | End date | text |
id | Calendar id | text |
color | Fill color | text |
Load CalendarStyle
Change the style of the table (font and borders)
Title | Description | Type |
font-famaly | Font | text |
border-color | Border color | text |
border-style | Border style (none,solid,dotted,dashed,double,groove,ridge,inset,outset) | text |
border-width | Border width | text |
Load TextColor
Change the color of the title, days of the week, and date.
Title | Description | Type |
num_color | Day and number color | text |
hed_color | Heder text color | text |
Edit Event
Changes the event settings in the calendar.
Title | Description | Type |
title | Event name | text |
start | Start date | text |
end | End date | text |
id | Calendar id | text |
color | Fill color | text |
Delete Event
Delete an event from the calendar.
Title | Description | Type |
id | Event id | text |
SkillCalendar States
States:
Title | Description | Type |
select_start | Start date for the selected cell, set when the Select event is fired | date |
select_end | End date for the selected cell, set when the Select event is fired. When you click on an event, its parameters are returned from the calendar through the state. | date |
click_start | Start date of the highlighted event | date |
click_end | Date of completion of the highlighted event | date |
click_title | The title of the highlighted event | text |
click_id | Unique ID of the highlighted event | text |
click_color | The color of the highlighted event | text |
SkillCalendar Events
Events:
Name | Description |
Select | Event is triggered when a user clicks on a calendar cell. |
Click | Event is triggered when a calendar event is clicked. |