DownloadPHP 7.4PHP 8Joomla 3.10Joomla 4.4Joomla 5
The Calendar menu item shows the default DPCalendar Joomla calendar. It is a javascript powered calendar application which loads it's event trough ajax requests for a fast page load and to not force a site refresh when navigating around in the calendar. It comes with tons of configuration options to adapt it perfectly to your web site. The site admin can define the options on a per menu item level or globally in the DPCalendar options.
The Joomla calendar has four different views -month, week, day and list, which are showing your events in different grids. On the top of every view is the calendar toolbar which allows you to navigate within the calendar view. It is possible to navigate back and forth in the view or to jump to a certain date through a compact date picker. For those who like to print out the calendar, we have an optimized print view, which can be opened directly through the print button. Beside the quick edit form, the admin can also create new events with the + button, which opens an event form page.
The map below the calendar show the events from the current view based on their locations. If there are multiple events on close locations or even on the same location, then a cluster is shown which shows an icon about how many events do appear on that spot. Clicking on the cluster icon will expand the events where the visitor can click on them to show their info popup.
How to setup the map providers and more is documented in the maps Introduction article.
Above the calendar view is a list of calendars which are shown on the actual page. Initially the list is hidden and can be expanded by clicking the arrow button. There is an option to define the initial state of the list if it should be shown closed or expanded or even hidden for the visitor. The calendars can be deselected to show only events of the calendars the visitor wants. For every calendar is an Ical Url available to download the calendar as .ics file. The Subscribe link offers the possibility to subscribe to the event through an application which supports the webcal protocol. If the visitor is logged in, then a private ical url will be shown (when the token is generated in the profile) and a CalDAV url to access the calendar from any CalDAV device.
The month view displays a full month of events where each cell represents a day. When clicking on a day number, it navigates you to the view of the respective day. If needed the week numbers can be displayed too.
The week view displays a whole week of events where each column represents a day. The rows of such a column do define the hour of the day where the event happens. If there are all day events, then they will be displayed on the top of every day. Clicking on a day number, then it navigates you to the day view of the respective day.
The day view displays a whole day of events as a single column. The rows of such a column do define the hour of the day where the event happens. If there are all day events, then they will be displayed on the top of every day. This view fits best as multi resource view because there is a lot of space available.
The list view displays a list of events where each row represents an event, grouped together per day. Clicking on a date in the day header, then it navigates you to the day view of the respective day. In the calendar options can be the date span defined, the list should show and jump when a navigation button is clicked.
With the business hours and days setting you can indicate when your store is open. The calendar highlights the closed days and hours with a grey background. If you want to change the color, use your own CSS and the selector
.com-dpcalendar-calendar__calendar .fc-nonbusiness {
background-color: green;
}
If you have enabled a location filter in the DPCalendar options and assigned some views to show resources in, then the calendar can show columns with the location or the different rooms. You can also assign an event not only to a resource but also to a specific room. Means the event will then appear in that room only on the resource column for this room.
If you click in a day cell and have the create event permission, then a quick add dialog is opened where the author can quickly create an event on the date of the selected cell.
When the user moves it's mouse over an event, a tooltip pops up which displays some details of the event and shows some quick links to common actions. We are using the tippy.js library which has a small footprint and zero dependencies, except to popper.js.
To override the styles of the tooltip library you can add the selector .tippy-content to reference the elements. For example to change the background you can add the following code snippet into your custom.css (or whatever your template offers to add custom code).
.tippy-content{
background-color: blue;
}
It is very likely that you want to adapt the output of the tooltip. To achieve that you have to create a layout override by coping the file /components/com_dpcalendar/layouts/event/tooltip.php to /templates/{{your template}}/html/layouts/com_dpcalendar/event/tooltip.php. Then change the file contents in your template according to your needs.
For example, if you want to increase the description length in the popup to 365, then change the line 47 to:
<?php echo Joomla\CMS\HTML\HTMLHelper::_('string.truncate', $event->description, 100); ?>
To completely remove the tooltip from the component calendar make a tooltip override as described above and empty the file /templates/{{your template}}/html/layouts/com_dpcalendar/event/tooltip.php.
In the calendar menu item the admin can set different filters for the events to display only what is needed.
When filtering for an author, then only events of a given user are shown within the calendar. There is a special "My" option available which displays only events of the current logged in user.
A filter to display only events from the selected locations.
A filter to display only events from the selected tags. Tags can be set while editing an event.
The settings can be configured globally in the DPCalendar options or per menu item. If the value is empty in the menu item, then it will be inherited from the global options.
Comments (0)