FullCalendar https://fullcalendar.io/docs/ で CSS をあれこれいじるために書き下しました。
theme-* は、 ThemeSystem の設定で設定される変数なので、 Standard なのか、 Bootstarp なのか、JqueryUI なのかに応じて書き換えてください
> div.fc.theme-widget.fc-ltr {
> div.fc-toolbar.fc-header-toolbar {
// ヘッダー
}
> div.fc-view-container {
> div.fc-view.fc-month-view.fc-basic-view,
> div.fc-view.fc-basicDay-view.fc-basic-view,
> div.fc-view.fc-basicWeek-view.fc-basic-view {
> table.theme-tableGrid {
> thead.fc-head > tr {
> td.fc-head-container.theme-widgetHeader {
> div.fc-row.theme-headerRow {
> table.theme-tableGrid {
> thead > tr {
> th.fc-day-header.theme-widgetHeader { // fc-{day_of_the_week} (fc-sun とか、曜日のクラスもここ
span { // 曜日
}
}
}
}
}
}
}
> tbody.fc-body > tr {
> td.theme-widgetContent {
> div.fc-scroller.fc-day-grid-container {
> div.fc-day-grid.fc-unselectable {
> div.fc-row.fc-week.theme-dayRow.fc-rigid {
> div.fc-bg { // 日付のセル
> table.theme-tableGrid {
> tbody > tr {
> td.fc-day.theme-widgetContent { // fc-{day_of_the_week} (fc-sun とか、曜日のクラスもここ
&.fc-today.theme-today {
}
> tbody > tr {
> td.fc-day.theme-widgetContent { // fc-{day_of_the_week} (fc-sun とか、曜日のクラスもここ
&.fc-today.theme-today {
}
}
}
}
}
> div.fc-content-skeleton { // 日付のセル内に書く内容。日付とイベント
> table {
> thead > tr {
> td.fc-day-top { // fc-{day_of_the_week} (fc-sun とか、曜日のクラスもここ
&.fc-today.theme-today {
a.fc-day-number { // 日付表示
}
}
}
}
> tbody > tr {
> td { // no events, no classes
}
> td.fc-event-container {
> a.fc-day-grid-event.fc-h-event.fc-event { // .fc-start.fc-end もここ
> div.fc-content {
span.fc-title { // イベントの title
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}