CP Multi View Events Calendar

Don’t see your language? Open a support ticket and we’ll add it quickly!

🆕 Latest Update

New: A refreshed interface for easier editing of inserted event calendar views, plus instant preview buttons for faster verification of calendar layouts on your website.

🔁 Import / Export Events (iCal Support)

You can easily import and export calendar events using the iCal (.ics) format — fully compatible with Google Calendar. This feature is available in the Platinum version .

📅 Calendar Insertion Settings

To insert the calendar form into some content or post use the insertion area that will appear below the editor when editing contents. It looks like the following image:

https://wordpress.dwbooster.com/UserFiles/Image/cp-multiview-calendar/insert-calendar.png

The fields on the event calendar insertion area (shown in the above image) are the following:

• MultiCalendar: Which of the calendars will be shown.
• Calendar Views: The views that will be included in the event calendar.
• Default View: Which of the calendar views will appear as default.
• Start day of the week: The start day of the week (Ex: Sunday, Monday, …).
• CSS Style: Select one of the CSS styles available to render the calendar.
• Palette Color: The palette color used for the events in the calendar.
• Allow edition: Check this box if the event calendar will allow edition on the public website.
• Other buttons: Select the buttons that will be displayed on the top of the calendar.
• Number of Months for nMonths View: Number of months shown at the same time in the nMonths View.
• Other parameters for nMonths View: Other parameters for the nMonths View (more info below).
• Other parameters: Other parameters that apply to all calendar views (more info below).

💡 Advanced Customization

The additional parameters should be added into the “Other Parameters” box in the event calendar insertion area. These parameters must be comma separated and will overwrite the initial configuration selected for the event calendar.

The “Other Parameters” box can be found in the following location (click to enlarge image): https://wordpress.dwbooster.com/demos/multi-view/screenshots/additional-parameters.png

🎨 Adding custom CSS Styles

The custom CSS styles can be added into the “Customization area >> Add Custom Styles” (at the bottom of the page that contains the list of calendars).

🧩 Calendar View Examples

The following area some sample views. You can apply or mix configurations to get your own calendar views in addition to the following samples:

1. 01View day only: Event calendar configured with the “day” view option only, the “Default View” should be “day”. The views “Week”, “Month”, “nMonth” should be unchecked. To fix the height, just add (for example) the parameter “height:400”. Sample: https://wordpress.dwbooster.com/demos/multi-view/01-view-day-only.html
2. 02View week only: Event calendar configured with the view week option only; the “Week” view should be enabled and the default view should be “week”. The views “Day”, “Month” and “nMonth” should be disabled. To fix the height, just add (for example) the parameter “height:400”. Sample: https://wordpress.dwbooster.com/demos/multi-view/02-view-week-only.html
3. 03View month only: Event calendar configured with the view month option only. To get this enable the “Month” view and set the default view to “month”. The views “Day”, “Week” and “nMonth” should be unchecked. To fix the height, just add (for example) the parameter “height:400”. Sample: https://wordpress.dwbooster.com/demos/multi-view/03-view-month-only.html
4. 04View n-Months only: Event calendar configured with the view n-Months option only. This can be done by setting the amount of months to display in the event calendar to 12, enable only the “n-Month” view and setting the “Default View” to “nMonth”. All the other views and buttons should be unchecked. In the styles for this sample we have selected to fix the calendar width. Sample: https://wordpress.dwbooster.com/demos/multi-view/04-view-n-months-only.html
5. 05Small event calendar: You can configure the calendar just like a single small event calendar. This can be done by selecting the n-Months view and setting the “Number of Months for nMonths View” dropdown select box to 1. Sample: https://wordpress.dwbooster.com/demos/multi-view/05-small-calendar.html
6. 06n-Month view, only one month, large view: Event calendar with the n-Month view configured to display a single month in a large view. To get this result enable only the “n-Month” view and add the styles specified in the following sample page: https://wordpress.dwbooster.com/demos/multi-view/06-one-month-large-view.html
7. 07n-Month view with 2 months using all the width: To get this result in the calendar enable only the “n-Month” view, set the “Number of Months for nMonths View” dropdown select box to 2 and add the styles specified in the following sample page to fix the width of both the event calendar area and the width of each month: https://wordpress.dwbooster.com/demos/multi-view/07-two-months-using-all-the-width.html
8. 08n-Month view, 3 months with vertical align: The first settings needed to get this calendar configuration is to enable only the “n-Month” view and set the “Number of Months for nMonths View” dropdown select box to show 3 months. After that proceed to add some CSS styles to fix the width to the desired column width. This way you can publish the calendar in the sidebar of your website. Sample: https://wordpress.dwbooster.com/demos/multi-view/08-various-months-with-vertical-align.html
9. 09Tooltip displayed on month,week and day view: In this event calendar sample, when you click over an event in the calendar, a floating tooltip panel with additional information is displayed. This type of tooltip is available for the month, week and day views. The n-Month view has a different type of tooltip panel. To enable the tooltips, the parameter “showtooltipdwm” must be set to “true” (or enable it by checking the checkbox in the visual configuration). In addition to these parameters, add also the styles mentioned in the following page as instructed: https://wordpress.dwbooster.com/demos/multi-view/09-tooltip-displayed.html
10. 10Lighter view for events and center align: This calendar sample features the month, week and day views showing the events with a more lighter view: a color border is used instead filled backgrounds and the text is centered. The tooltips are already enabled for this sample; to enable the tooltips you can do that by checking the tooltip checkbox in the visual configuration or just by setting parameter “showtooltipdwm” to “true”, this is also explained in other demos. To get the more lighter view you can add the styles indicated at this page: https://wordpress.dwbooster.com/demos/multi-view/10-lighter-view-center-align.html
11. 11Multi-line event description: Event calendar that displays a multi-line event description in the month, week and day views, this is useful to display more information directly over the calendar. Only two CSS rules should be added to the styles to get this configuration. It will work with any selection of parameters if you are using one of the mentioned views. Check the detailed instructions at this page: https://wordpress.dwbooster.com/demos/multi-view/11-multi-line-event-description.html
12. 12Images and HTML formatting in tooltip: The tooltips on the calendar can show images and formatted text. There are some styles that can be used to show/hide/customize the title, location, description and time: these styles are the CSS classes named “bubbletitle”, “bubblelocation”, “bubbledescription” and “bubbletime”. In this sample we have used only the class “bubbletime” to align it at the bottom of the content/image: https://wordpress.dwbooster.com/demos/multi-view/12-images-and-html-formatting-in-tooltip.html
13. 13Images directly on the calendar cells: You can use this plugin like a picture calendar. The images should be added to the event description and the css rules mentioned in the following page to complete the formatting: https://wordpress.dwbooster.com/demos/multi-view/13-images-directly-on-the-calendar-cells.html
14. 14Show only from Monday to Friday: In this event sample we have disabled the Saturday and Sunday since this is a common configuration. In the “viewWeekDays” parameter, each number in the array represents a weekday from Sunday to Saturday. An zero means