backdrop-contrib / fullcalendar_views

Views style plugin to render all sorts of date fields as event calendar with FullCalendar
https://backdropcms.org/project/fullcalendar_views
GNU General Public License v2.0
2 stars 4 forks source link

Documentation #11

Open indigoxela opened 2 years ago

indigoxela commented 2 years ago

Hopefully everything is as self-explaining as possible, but we're dealing with views, so some documentation would be good.

Egmund commented 2 years ago

Here is a start that will give a functioning calendar.

Before starting with the Fullcalendar views create a content type with a valid date field. Create content for the calendar from this type.

First step: Choose Fullcalendar NG when creating a new View Second: Add fields: A valid date field, Title field which should NOT link to original content (uncheck this) and Path

Go to 'Fullcalendar NG | Settings' to check that Date and Title fields are set correctly. Set the URL field to Path in order to make events clickable.

indigoxela commented 2 years ago

@Egmund cool, many thanks for starting the docs! :+1:

Did you know, that not only date fields are supported, but also things like "node created" or "node updated"? But the most common use-case is for sure to use date field values.

Egmund commented 2 years ago

BTW. Playing w. this I saw a warning while legacy fullcalendar was installed pointing to line 168 of something. It did not have any impact though. Also: This 'The "Multiple field setting" for the field_date field is currently to display all in one row, which is not recommended.' is irrelevant if the Date field is not date-repeat, and it can not be changed - the option is not there.

indigoxela commented 2 years ago

Playing w. this I saw a warning while legacy fullcalendar was installed pointing to line 168 of something

Hm, where? In which context? When creating a view or on the views page?

This 'The "Multiple field setting" for the field_date field is currently to display all in one row ... is irrelevant if the Date field is not date-repeat

Date fields (from core) also have a setting for "Number of values" and if it's not "Limited | 1" the same problem might arise. No worries, the message is only shown, if it's relevant (based on the views property of options['group_rows']).

Egmund commented 2 years ago

Warning was in creating/editing view, not the actual calendar page. 'Update preview' trigger these warnings. - and legacy fullcalendar have to be installed (erased here).

indigoxela commented 2 years ago

Warning was in creating/editing view, ... 'Update preview' trigger these warnings. - and legacy fullcalendar have to be installed

I keep the legacy version installed on my dev to find any further conflicts, but see no warnings. At least not on php 7.4. :thinking:

Egmund commented 2 years ago

Ah, mine was on 7.0

indigoxela commented 2 years ago

I have to correct myself, the warning does appear on unrelated views. Need to dig why this happens.

indigoxela commented 2 years ago

Hehe, and now I also found that "168" thing. Fixed both.

indigoxela commented 2 years ago

I started the wiki: https://github.com/backdrop-contrib/fullcalendar_views/wiki/Create-a-calendar

Very basic instructions so far.

Egmund commented 2 years ago

Maybe different subject, but: I wanted a small calendar block for a side-column. You can see it here: https://bd.buddhistisksamfund.dk/ I created a block view and gave it a CSS klasse:kalenderblok and put some css in my custom.css file to make it look reasonable:

.kalenderblok .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events { position: relative; min-height: 1em; }

.kalenderblok .fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin-bottom: 0; }

.kalenderblok .fc-daygrid-event-dot {display: none;}

.kalenderblok .fc-event-time {display: none;}

.kalenderblok .fc .fc-daygrid-event { margin-top: 0; }

.kalenderblok .fc .fc-daygrid-day-events { margin-top: 0; }

.kalenderblok .fc .fc-daygrid-day-number { padding: 4px 4px 0; }

.kalenderblok .fc .fc-toolbar-title { font-size: 1.20em; margin: 0; }

.kalenderblok .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 0.3em; }

.kalenderblok .fc-daygrid-dot-event { padding: 0; }

yorkshire-pudding commented 2 years ago

@indigoxela I'm wondering if there is a need for a wiki page that considers options for making FC views mobile friendly. On a site I've done, I used CSS to hide it and show a more mobile friendly listing block by month once it get smaller than tablet size.

One idea, but I haven't got any further than idea, was using another module to open more info in a modal.

indigoxela commented 2 years ago

I'm wondering if there is a need for a wiki page that considers options for making FC views mobile friendly

Sure, some helpful hints are always welcome. Although FC isn't mobile-"un"friendly per se, there are always tricks to improve overall UX.

Another idea: do you have a personal blog, where you can post tutorials? I belief, info like that still is (too) rare for Backdrop in general - module or core tweaks.