The timeline calendar menu item shows the DPCalendar calendars in an zorizonal grid view. 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 timeline Joomla calendar has three different views -month, week and day, 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, there is 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 shows 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 panel with various different filter possibilities. Initially the panel is hidden and can be expanded by clicking the filter button. There is an option to define the initial state of the filter panel 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. There is a search area available which allows to search between dates and in content. Users are also able to search events in a certain radius for a specific location. For every event text custom field is a filter shown as well, like that it is possible to have a more fine grained search filter.
If the user wants to search based on locations, then they can start typing a name in the location field. Instantly a search is performed which delivers a list of locations to choose from. These locations are fetched from the defined maps provider in the DPCalendar options.
As this search queries the geo location provider on each type, there is a setting to disable this behavior.
All these filter fields can be disabled individually, including the custom fields. It is possible to do that globally or per menu item.
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 basic options are empty by default, which means the global settings of component options will be used, but you can override this in the menu link configuration. The search criteria is saved in the session, which means, when the visitor comes back, then the settings are remembered.
It is possible to define the overall height of the calendar and the column width of the resource area in the menu options.
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.
The week view displays a whole week of events where each column represents the set duration. 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.
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 timeline 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)