Calendar visualization (depr., use Fullcalendar)

  • Views Views: 43,009
  • Last updated Last updated:
  • Introduction​

    The calendar visualization provides a nice way of visualizing events in a list.



    Anatomy of a Fabrik Calendar​


    calendar-example.png


    1. The add button allows users to add events - it will open up a pop-up form
    2. The previous and next buttons allow you to scroll through various months
    3. This menu lets you change the calendar view from the default month view to a day or week view.
    4. The events are shown as blocks in the calendar. Hover over them to get a contextual menu. If your user had rights (defined in the Fabrik table) they can delete or edit the event. Like adding and event, editing it brings up a window containing the form.
    • Clicking on the "Today" button will revert the calendars view to center on today's date
    • Double click on a date to open up the add event form

    Filtering​

    Filters will be shown above the calendar in exactly the same way as above the Fabrik list whose data it is showing.

    Setting the Lists' 'Require Filtering' option will also mean that the calendar will not show any data until a filter has been selected.

    To show/hide the filters you select it by going to components -> fabrik -> Visualizations, editing your calendar visualization and then under the right hand side 'Visualization Options' tab set 'show filters' = 'yes'

    This option is overridden if you call your calendar either by a url with 'showfilters=0' in its query string, or via a Joomla Content plugin if you add showfilters=0 inside the {fabrik..... } tag.

    Calendar JavaScript Events​

    As of 3.0.8, when a user clicks an event a custom Fabrik Javascript event is triggered:

    Code:
    Fabrik.fireEvent('fabrik.viz.calendar.event', [e]);

    The variable e is the click event produced.

    To register some custom js to interact with the users click you would add

    Fabrik.addEvent('fabrik.viz.calendar.event', function (e) {
    // add some custom code here
    });

    Administration options​



    calendar-data.png

    Data​

    This section allows you to specify Fabrik tables as data sources to feed into your calendar. To add a new Fabrik table press the "add" button, to remove a Fabrik table press the "delete" button.
    • Connection - If you want to connect up some of your existing Fabrik tables to the calendar then you have to select the Fabrik connection in which they will be found
    • List - The fabrik table whose data you want to display in the calendar
    • Start date element - The Date element whose data corresponds to the event start date
    • End date element - The Date element whose data corresponds to the event's end date
    • Label element - The element whose data should be used as the event label
    • Colour - A hex colour (e.g. #00FF00) that is used as the event background color.
    • Legend (3.x) This data sets legend label, if left blank, defaults to the list's label
    • Custom URL (3.0.8) Overrides the events default edit / view. Can use the following Placeholders {startdate}, {enddate}, {label}, {colour}, {formid}, {id}

    Options​

    calendar-optons.png

    • Template - The template to use to render the calendar. In Fabrik 3.1+ the template folders can be found in: plugins/fabrik_visualization/calendar/views/calendar/tmpl. In older versions the template folders can be found in components/com_fabrik/plugins/Visualizations/calendar/views/calendar/tmpl
    • Show legend - Select 'yes' to show a legend of event types and their associated colours
    • Standard event table - Select 'yes' if you want to use the default event table. This is the simplest way to get started using the calendar, and doesn't require you to select information in the Data section (removed in 3.0)
    • Day view - is the day view button visible (see point 3 in the image below) When clicked this changes the view from a month view to a day view
    • Week view - is the week view button visible (see point 3 in the image below)When clicked this changes the view to a week view
    • Popup window y offset - The number of pixels from the top of the page at which the add event pop-up window appears. Use this to offset the window beneath any Javascript navigation feature you may have at the top of your Joomla template.
    • First week day - The day of the week that the calender takes as the beginning of a new week, select 0 for Sunday, 1 for Monday etc.
    • Read only (3.0) - Stops the calendar events from showing the edit/view pop up window. Custom event links, if added, are still applied. (in 3.0 moved to the data section)
    • Time format - see http://mootools.net/docs/more/Types/Date#Date:format

    Month View options​


    calendar-month.png

    • Day width- The height in pixels of the day box
    • Day height- The width in pixels of the day box
    • Greyscale weekends - Should the weekends be greyed out - see the image below for how this looks in the month view

    Week View Options​

    calendar-week.png

    • Day width - width of day box in pixels
    • Day height - Day box height in pixels
    • Start time - The hour at which the day starts. Useful to limit additions to say office hours. Value of 0 to 24
    • End time - The hours when the day ends. Value of 0 to 24
    • Show weekends - should weekend be shown
Back
Top