/******* Default styling, overwrite me! *******/ .tscal-event-wrapper { border: solid 1px black; /* overflow: hidden; background-color: #fff; z-index: 5; */ } .tscal-current-time-indicator { border: solid 1px rgba(219, 187, 187, 0.5);; } .tscal-hour-cell { border-style: solid; border-color: rgba(229, 231, 235, 0.5); } .tscal-vertical { border-width: 2px 0 0; } .tscal-horizontal { border-width: 0 0 0 2px; } /******* Layout: Base (==Vertical) *******/ .timeslot-calendar div { box-sizing: border-box; } .timeslot-calendar .titles-heading { display: flex; flex-direction: row; } .timeslot-calendar .title-heading { flex: 1; } .timeslot-calendar .buckets-heading { display: flex; flex-direction: row; } .timeslot-calendar .bucket-heading { flex: 1; } .timeslot-calendar .calendar-body { display: flex; flex-direction: row; overflow-y: scroll; } .timeslot-calendar .day-wrapper { flex: 1; } .timeslot-calendar .day-body { position: relative; } .timeslot-calendar .hour-indicator-wrapper { display: flex; flex-direction: column; height: 100%; position: relative; } .timeslot-calendar .hour-indicator-cell { min-height: 0; flex: 1; } .timeslot-calendar .tscal-current-time-indicator { position: absolute; } .timeslot-calendar .buckets-wrapper { position: absolute; display: flex; flex-direction: row; overflow: hidden; } .timeslot-calendar .bucket { flex: 1; position: relative; } .timeslot-calendar .event-wrapper { position: absolute; } /******* Layout: Vertical specific *******/ .timeslot-calendar .orientation-wrapper.vertical .hour-indicator { text-align: center; } /******* Layout: Horizontal *******/ .timeslot-calendar .orientation-wrapper.horizontal { display: flex; flex-direction: row; } .timeslot-calendar .orientation-wrapper.horizontal .titles-heading { flex-direction: column; } .timeslot-calendar .orientation-wrapper.horizontal .title-heading { flex: none; display: flex; flex-direction: row; } .timeslot-calendar .orientation-wrapper.horizontal .day-heading { flex: 1; } .timeslot-calendar .orientation-wrapper.horizontal .buckets-heading { flex-direction: column; } .timeslot-calendar .orientation-wrapper.horizontal .calendar-body { flex: 1; flex-direction: column; overflow-x: scroll; } .timeslot-calendar .orientation-wrapper.horizontal .buckets-wrapper { flex-direction: column; } .timeslot-calendar .orientation-wrapper.horizontal .hour-indicator-wrapper { flex-direction: row; } /******* Layout: Horizontal - Date On Top *******/ .timeslot-calendar .orientation-wrapper.horizontal_date_on_top .body-wrapper { display: flex; flex-direction: row; } .timeslot-calendar .orientation-wrapper.horizontal_date_on_top .buckets-heading { flex-direction: column; } .timeslot-calendar .orientation-wrapper.horizontal_date_on_top .calendar-body { flex: 1; flex-direction: column; overflow-x: scroll; } .timeslot-calendar .orientation-wrapper.horizontal_date_on_top .buckets-wrapper { flex-direction: column; } .timeslot-calendar .orientation-wrapper.horizontal_date_on_top .hour-indicator-wrapper { flex-direction: row; }