Skip to content

Commit

Permalink
Move calendar styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@drakejacob
drakejacob committed Jul 10, 2023
1 parent f73d4ea commit 61ceac0
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 141 deletions.
146 changes: 143 additions & 3 deletions pages/schema.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export const getServerSideProps = async () => {

const calendarEvents = await Promise.all(calenderLinks.map(async calenderLink => {
return await ical.async.fromURL(calenderLink.url)
.catch(() => {
return { error: "Failed to fetch calendar from the following URL: " + calenderLink.url }
})
.catch(() => {
return { error: "Failed to fetch calendar from the following URL: " + calenderLink.url }
})
}))

const stringifiedCalendars = calendarEvents.map(events => JSON.stringify(events))
Expand Down Expand Up @@ -127,6 +127,146 @@ const Schema: NextPage<SchemaProps> = ({ stringifiedCalendars, firstdayDates })
}
}}
/>
<style>
{`
/* -------------------------------- */
/* --- Styling for FullCalendar --- */
/* -------------------------------- */
/* Background shading of current day */
.fc .fc-timegrid-col.fc-day-today {
background-color: hsla(0, 0%, 100%, 0.07);
}
/* Hours on the left side of the calendar */
.fc .fc-timegrid-slot-label-cushion {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
font-size: 10px;
}
/* Transparent borders */
.fc th, .fc td {
border: 1px solid hsla(0, 0%, 100%, 0.1);
}
/* Transparent borders */
.fc-theme-standard .fc-scrollgrid {
border: none;
border-top: 1px solid hsla(0, 0%, 100%, 0.1);
border-left: 1px solid hsla(0, 0%, 100%, 0.1);
}
/* Transparent borders */
.fc-theme-standard td {
border: 1px solid hsla(0, 0%, 100%, 0.1);
}
/* Buttons in the top right */
.fc .fc-button-group > .fc-button {
background-color: hsla(0, 0%, 100%, 0);
border: none;
text-align: center;
}
/* Buttons in the top right on hover */
.fc .fc-button-group > .fc-button:hover {
background-color: hsla(0, 0%, 0%, 0.2);
}
/* Buttons in the top right on click */
.fc .fc-button-group > .fc-button:active {
background-color: hsla(0, 0%, 0%, 0.4);
}
/* Buttons in the top right don't give feedback on hover when disabled */
.fc .fc-button-primary:disabled:hover {
background-color: hsla(0, 0%, 0%, 0);
}
/* Buttons in top right don't show focus selection box */
.fc .fc-button-primary {
box-shadow: none !important;
}
/* Distance between calendar and buttons */
.fc .fc-toolbar.fc-header-toolbar {
margin-bottom: 16px;
}
/* Current time indicator line */
.fc .fc-timegrid-now-indicator-line {
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.8);
}
/* Hides current time indicator arrow */
.fc .fc-timegrid-now-indicator-arrow {
display: none;
}
/* Toolbar title styling */
.fc .fc-toolbar-title {
font-size: 1.25rem;
font-style: italic;
text-transform: capitalize;
}
/* Calendar event blocks */
.fc-timegrid-event .fc-event-main {
padding: 2px 4px 0;
}
/* Remove outer border from calendar events */
.fc-timegrid-event-harness-inset .fc-timegrid-event {
box-shadow: none;
}
/* Remove inner event border */
.fc-v-event {
border: none;
}
/* Height of each hour */
.fc .fc-timegrid-slot-label {
height: 30px;
}
/* Event time */
.fc-timegrid-event .fc-event-time {
font-size: 8px;
white-space: break-spaces;
}
/* Event title */
.fc-v-event .fc-event-title-container {
font-size: 10px;
font-weight: bold;
margin-top: -2px;
}
/* Decreases size of day/month numbers on mobile */
@media (max-width: 1024px) {
/* */
.fc .fc-col-header-cell-cushion {
font-size: 10px;
}
/* Event time */
.fc-timegrid-event .fc-event-time {
font-size: 7px;
}
/* Event title */
.fc-v-event .fc-event-title-container {
font-size: 8px;
font-weight: bold;
margin-top: -2px;
}
}
`}
</style>
</div>
</Page>
</>
Expand Down
138 changes: 0 additions & 138 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,141 +156,3 @@ div:hover > .downarrow {
width: 20px;
height: 20px;
}


/* -------------------------------- */
/* --- Styling for FullCalendar --- */
/* -------------------------------- */

/* Background shading of current day */
.fc .fc-timegrid-col.fc-day-today {
background-color: hsla(0, 0%, 100%, 0.07);
}

/* Hours on the left side of the calendar */
.fc .fc-timegrid-slot-label-cushion {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
font-size: 10px;
}

/* Transparent borders */
.fc th, .fc td {
border: 1px solid hsla(0, 0%, 100%, 0.1);
}

/* Transparent borders */
.fc-theme-standard .fc-scrollgrid {
border: none;
border-top: 1px solid hsla(0, 0%, 100%, 0.1);
border-left: 1px solid hsla(0, 0%, 100%, 0.1);
}

/* Transparent borders */
.fc-theme-standard td {
border: 1px solid hsla(0, 0%, 100%, 0.1);
}

/* Buttons in the top right */
.fc .fc-button-group > .fc-button {
background-color: hsla(0, 0%, 100%, 0);
border: none;
text-align: center;
}

/* Buttons in the top right on hover */
.fc .fc-button-group > .fc-button:hover {
background-color: hsla(0, 0%, 0%, 0.2);
}

/* Buttons in the top right on click */
.fc .fc-button-group > .fc-button:active {
background-color: hsla(0, 0%, 0%, 0.4);
}

/* Buttons in the top right don't give feedback on hover when disabled */
.fc .fc-button-primary:disabled:hover {
background-color: hsla(0, 0%, 0%, 0);
}

/* Buttons in top right don't show focus selection box */
.fc .fc-button-primary {
box-shadow: none !important;
}

/* Distance between calendar and buttons */
.fc .fc-toolbar.fc-header-toolbar {
margin-bottom: 16px;
}

/* Current time indicator line */
.fc .fc-timegrid-now-indicator-line {
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.8);
}

/* Hides current time indicator arrow */
.fc .fc-timegrid-now-indicator-arrow {
display: none;
}

/* Toolbar title styling */
.fc .fc-toolbar-title {
font-size: 1.25rem;
font-style: italic;
text-transform: capitalize;
}

/* Calendar event blocks */
.fc-timegrid-event .fc-event-main {
padding: 2px 4px 0;
}

/* Remove outer border from calendar events */
.fc-timegrid-event-harness-inset .fc-timegrid-event {
box-shadow: none;
}

/* Remove inner event border */
.fc-v-event {
border: none;
}

/* Height of each hour */
.fc .fc-timegrid-slot-label {
height: 30px;
}

/* Event time */
.fc-timegrid-event .fc-event-time {
font-size: 8px;
white-space: break-spaces;
}

/* Event title */
.fc-v-event .fc-event-title-container {
font-size: 10px;
font-weight: bold;
margin-top: -2px;
}

/* Decreases size of day/month numbers on mobile */
@media (max-width: 1024px) {
/* */
.fc .fc-col-header-cell-cushion {
font-size: 10px;
}

/* Event time */
.fc-timegrid-event .fc-event-time {
font-size: 7px;
}

/* Event title */
.fc-v-event .fc-event-title-container {
font-size: 8px;
font-weight: bold;
margin-top: -2px;
}
}

0 comments on commit 61ceac0

Please sign in to comment.