Monday, 18 December 2017

FullCalendar Anatomy

This will detail discoveries about the FullCalendar plugin.

We're primarily interested in three views: month, agendaWeek and agendaDay. Further, we're only interested in the calendar itself and not the header (div.fc-toolbar).

I've written it in Markdown so I can scroll the container.

## month ##
The `div.fc-month-view` is within the `div.fc-view-container` and consists of a table with a `thead.fc-head` which has the days of the week and a `tbody.fc-body`.
* `tbody.fc-body`
    * `tr`
        * `tr.fc-widget-content`
            * `div.fc-day-grid-container`
                * `div.fc-day-grid`
                    * `div.fc-row.fc-week` **×6**
                        * `div.fc-bg`
                            * `table`
                                * `tbody`
                                    * `tr`
                                        * `td.fc-day.fc-widget-content` **×7 plus (`fc-sun`, `fc-mon`, `fc-tue`, `fc-wed`, `fc-thu`, `fc-fri` or `fc-sat`)**
                        * `div.fc-content-skeleton`
                            * `table`
                                * `thead`
                                    * `tr`
                                        * `td.fc-day-number`  **×7 plus (`fc-sun`, `fc-mon`, `fc-tue`, `fc-wed`, `fc-thu`, `fc-fri` or `fc-sat`), this is where the numbers are.**                    
                                * `tbody`
                                    * `tr`
                                        * `td` **if these have events then `.fc-event-container`, otherwise just empty**                           

## agendaWeek ##
* `tbody.fc-body`
    * `tr`
        * `td.fc-widget-content`
            * `div.fc-day-grid`
                * `div.fc-row.fc-week.fc-widget-content`
                    * `div.fc-bg`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc-axis.fc-widget-content`
                                        * `span`
                                    * `td.fc-day.fc-widget-content` **×7 plus (`fc-sun`, `fc-mon`, `fc-tue`, `fc-wed`, `fc-thu`, `fc-fri` or `fc-sat`)**
                    * `div.fc-content-skeleton`
            * `hr.fc-divider.fc-widget-header`
            * `div.fc-time-grid-container.fc-scroller`
                * `div.fc-time-grid`
                    * `div.fc-bg`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc-axis.fc-widget-content`
                                    * `td.fc-day.fc-widget-content` **×7 plus (`fc-sun`, `fc-mon`, `fc-tue`, `fc-wed`, `fc-thu`, `fc-fri` or `fc-sat`)**
                    * `div.fc-slats`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc-axis.fc-time fc-widget-content`
                                        * `span` **Time here (repeated for every half hour during the day)** 
                                    * `td.fc-widget-content`
                                * `tr.fc-minor`
                    * `div.fc-content-skeleton`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc.axis`
                                    * `td` **×7**
                                        * `div.fc-content-col`
                                            * `div.fc-event-container.fc-helper-container`
                                            * `div.fc-event-container` **Events go here**
                                            * `div.fc-highlight-container`
                                            * `div.fc-bgevent-container`
                                            * `div.fc-business-container`

## agendaDay ##
* `tbody.fc-body`
    * `tr`
        * `td.fc-widget-content`
            * `div.fc-day-grid.fc-unselectable`
                * `div.fc-row.fc-week.fc-widget-content`
                    * `div.fc-bg`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc-axis.fc-widget-content`
                                        * `span` **all-day**
                                    * `td.fc-day.fc-widget-content` **and fc-*day***
                    * `div.fc-content-skeleton`
            * `hr.fc-divider.fc-widget-header`
            * `div.fc-scroller.fc-time-grid-container`
                * `div.fc-time-grid.fc-unselectable`
                    * `div.fc-bg`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc-axis.fc-widget-content`
                                    * `td.fc-day.fc-widget-content` **and fc-*day***
                    * `div.fc-slats`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc-axis.fc-time.fc-widget-content` **these two cells are repeated every half hour**
                                        * `span` **time here**
                                    * `td.fc-widget-content`
                    * `hr.fc-divider.fc-widget-header`
                    * `div.fc-content-skeleton`
                        * `table`
                            * `tbody`
                                * `tr`
                                    * `td.fc-axis`
                                    * `td`
                                        * `div.fc-content-col`
                                            * `div.fc-event-container.fc-helper-container`
                                            * `div.fc-event-container` **Events here**
                                                * `a.fc-time-grid-event.fc-v-event.fc-event.fc-start.fc-end.fc-draggable.fc-resizable`
                                                    * `div.fc-content`
                                                        * `div.fc-time`
                                                            * `span` **time here**
                                                        * `div.fc-title`
                                                    * `div.fc-bg`
                                            * `div.fc-highlight-container`
                                            * `div.fc-bgevent-container`
                                            * `div.fc-business-container`