This plugin adds a simple calendar with events database feature to OctoberCMS.
- Easily add a calendar to your site and populate with your own event dates
- Store dates in a simple table through backend form
MyCalendar was built soley to be extended to do what you need. You can use it as is or add fields with your own plugins.
Go to the MyCalendar page in the backend and add your events.
- Drag "Month Component" to the page layout.
{% component 'Month' %}
- Edit Page URL to provide "Next" and "Previous" link to allow users to scroll through months. ( /calendarpage/ with no month or year will default to current month and year)
/calendarpage/:month?/:year?
- Drag "Month Component" to the page layout and edit as below.
<style>
table.mycal { width: 900px;}
</style>
{% component 'Month' %}
- Drag "Events Component" to add it to page.
- Drag "Month Component" to the page layout and edit as below.
{% component 'Month' events = MyEvents %}
The "Events Component" injects the MyEvents array into the page. It also has a modal pop-up for showing event details.
- Double click "Events Component" to add it to page.
- Drag "List Component" to the page layout and edit as below.
<div style="width:100px">
{% component 'EvList' events = MyEvents %}
{% set m = date()|date("m") +1 %}
{% component 'EvList' month = m events = MyEvents %}
</div>
The "List Component" only shows up when there are events for the month indicated. The "Events Component" injects the MyEvents array into the page.
- Month (month) - The month you want to show. ( defaults to now )
- Year (year) -The year you want to show. ( defaults to now )
- Events (events) - Array of the events you want to show.
- Calendar Color (color) - What color do you want calendar to be? ( defaults to red )
- Day Properties (dayprops) - Array of the properties you want to put on the day indicator.
- Load Style Sheet (loadstyle) - Do you want to load the default stylesheet?
These properties can be set by clicking on component and changing them there or in the page layout as below:
{% component 'EvList' month = 2 events = MyEvents %}
If passing you own "Events" and/or "Day Properties" to the calendar using an array in the page, here is the formate used:
/**
* ======================================================
* Sample of array format used to pass events to calendar
* ======================================================
**/
$this->page['MyEvents'] = [
2015 => [ // Year
2 => [ // Month
20 => [ // Day
[
'txt' => 'October CMS',
'link' => 'http://octobercms.com/'
],
[
'txt' => '<p>Text to show on calendar</p>',
// You can add properties to anchor tag if needed.
'link' => '#content-confirmation" data-toggle="modal',
// You can add a CSS class tag to the <li> tag for this event.
'class' => 'text-success',
// You can add an on-hover "title" property to the <li> tag for this event.
'title' => 'Just another test. This text shows on hover of event.'
],
],
22 => [
[
'txt' => 'My really long and dumb event name',
'title' => 'More about my really long and dumb event named event.'
],
],
],
]
];
/**
* ==============================================================
* Sample of array format used to pass Day Properties to calendar
* ==============================================================
**/
$this->page['MyDayProps'] = [
2015 => [ // Year
2 => [ // Month
20 => [ // Day
// You can add a link to the day indicator in the calendar.
// ( This example was for a modal AJAX dialog box. )
'link' => '#content-confirmation" data-toggle="modal'
],
22 => [
// You can add a CSS class to the day indicator in the calendar.
'class' => 'dis'
],
],
]
];
If you like this plugin or if you use some of my plugins, you can help me by submiting a review in the market.
Please do not hesitate to find me in the IRC channel or contact me for assistance. Sincerely Kurt Jensen