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`
No comments:
Post a Comment