From 6ee0cb51c63b716e05d727439f518e480625c76d Mon Sep 17 00:00:00 2001 From: Kevin Dao Date: Fri, 10 Aug 2018 15:36:40 -0500 Subject: [PATCH] Added course data into full calendar --- calendar.html | 5 +- css/_materialFullCalendar.css | 150 ++++++++++++++++++++++++++++++++++ css/fullcalendar.css | 2 +- js/calendar.js | 103 +++++++++++++++++++++++ 4 files changed, 258 insertions(+), 2 deletions(-) create mode 100644 css/_materialFullCalendar.css diff --git a/calendar.html b/calendar.html index 25808796..3f7ce75b 100644 --- a/calendar.html +++ b/calendar.html @@ -1,11 +1,14 @@ + - +
+ + \ No newline at end of file diff --git a/css/_materialFullCalendar.css b/css/_materialFullCalendar.css new file mode 100644 index 00000000..25b3c7ad --- /dev/null +++ b/css/_materialFullCalendar.css @@ -0,0 +1,150 @@ +/* + +This is the Material Design theme for FullCalendar Weekly Agenda view + +Creation Date: Aug 19th 2015 +Author: Jacky Liang +Version: FullCalendar 2.4.0 +Tested Using the Following FC Settings: + + editable: false, + handleWindowResize: true, + weekends: false, // Hide weekends + defaultView: 'agendaWeek', // Only show week view + header: false, // Hide buttons/titles + minTime: '07:30:00', // Start time for the calendar + maxTime: '22:00:00', // End time for the calendar + columnFormat: { + week: 'ddd' // Only show day of the week names + }, + displayEventTime: true, + allDayText: 'Online/TBD' + +Note: This has NOT been tested on Monthly or Daily views. + +Colors: Use the following - https://www.google.com/design/spec/style/color.html#color-color-palette + at the 700 level. An opacity of 0.65 is automatically applied to the + 700 level colors to generate a soft and pleasing look. + + Color were applied to each event using the following code: + + events.push({ + title: 'This is a Material Design event!', + start: 'someStartDate', + end: 'someEndDate', + color: '#C2185B' + }); + +*/ +/* Remove that awful yellow color and border from today in Schedule */ +.fc-state-highlight { + opacity: 0; + border: none; + } + + /* Styling for each event from Schedule */ + .fc-time-grid-event.fc-v-event.fc-event { + border-radius: 4px; + border: none; + padding: 5px; + opacity: 0.65; + left: 5% !important; + right: 5% !important; + } + + /* Bolds the name of the event and inherits the font size */ + .fc-event { + font-size: inherit !important; + font-weight: bold !important; + } + + /* Remove the header border from Schedule */ + .fc td, .fc th { + border-style: none !important; + border-width: 1px !important; + padding: 0 !important; + vertical-align: top !important; + } + + /* Inherits background for each event from Schedule. */ + .fc-event .fc-bg { + z-index: 1 !important; + background: inherit !important; + opacity: 0.25 !important; + } + + /* Normal font weight for the time in each event */ + .fc-time-grid-event .fc-time { + font-weight: normal !important; + } + + /* Apply same opacity to all day events */ + .fc-ltr .fc-h-event.fc-not-end, .fc-rtl .fc-h-event.fc-not-start { + opacity: 0.65 !important; + margin-left: 12px !important; + padding: 5px !important; + } + + /* Apply same opacity to all day events */ + .fc-day-grid-event.fc-h-event.fc-event.fc-not-start.fc-end { + opacity: 0.65 !important; + margin-left: 12px !important; + padding: 5px !important; + } + + /* Material design button */ + .fc-button { + display: inline-block; + position: relative; + cursor: pointer; + min-height: 36px; + min-width: 88px; + line-height: 36px; + vertical-align: middle; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + text-align: center; + border-radius: 2px; + box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + outline: none; + border: 0; + padding: 0 6px; + margin: 6px 8px; + letter-spacing: 0.01em; + background: transparent; + color: currentColor; + white-space: nowrap; + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + font-style: inherit; + font-variant: inherit; + font-family: inherit; + text-decoration: none; + overflow: hidden; + -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .fc-button:hover { + background-color: rgba(158, 158, 158, 0.2); + } + + .fc-button:focus, .fc-button:hover { + text-decoration: none; + } + + /* The active button box is ugly so the active button will have the same appearance of the hover */ + .fc-state-active { + background-color: rgba(158, 158, 158, 0.2); + } + + /* Not raised button */ + .fc-state-default { + box-shadow: None; + } \ No newline at end of file diff --git a/css/fullcalendar.css b/css/fullcalendar.css index dcbc9997..577b69d2 100644 --- a/css/fullcalendar.css +++ b/css/fullcalendar.css @@ -613,7 +613,7 @@ TODO: more distinction between this file and common.css color: #666; } .fc-unthemed td.fc-today { - background: #fcf8e3; } + background: #FFFFFF; } .fc-unthemed .fc-disabled-day { background: #d7d7d7; diff --git a/js/calendar.js b/js/calendar.js index e69de29b..d94fc3b9 100644 --- a/js/calendar.js +++ b/js/calendar.js @@ -0,0 +1,103 @@ +$(function() { + + const materialColors = + ['#FF1744', '#F50057', '#D500F9', '#651FFF', + '#3D5AFE', '#2979FF', '#00B0FF', '#00E5FF', + '#1DE9B6', '#00E676', '#76FF03', '#C6FF00', + '#FFEA00', '#FFC400', '#FF9100', 'FF3D00', + '#4E342E', '#424242', '#37474F']; + + + // console.log(moment().day('Tuesday')._d.toString().split(' ')); + // console.log(moment().format("YYYY-MM-") + moment().day('Tuesday')._d.toString().split(' ')[2]); + + // Counter to iterate through material colors to avoid duplicates + var colorCounter = 0; + + // Each schedule needs to store 'TITLE - START TIME - END TIME - COLOR' + var classSchedules = []; + + chrome.storage.sync.get('savedCourses', function (data) { + var savedCourses = data.savedCourses; + + console.log(savedCourses); + + // Iterate through each saved course and add to 'event' + for (let i = 0; i < savedCourses.length; i++) { + var classInfo = savedCourses[i]; // Store all info for a single class + + for (let j = 0; j < classInfo.datetimearr.length; j++) { + let session = classInfo.datetimearr[j]; // One single session for a class + + if (session[0] == 'M') { + classSchedules.push({ + title: classInfo.coursename, + start: moment().format("YYYY-MM-") + moment().day('Monday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', + end: moment().format("YYYY-MM-") + moment().day('Monday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', + color: materialColors[colorCounter], + allday: false + }); + } + + if (session[0] == 'T') { + classSchedules.push({ + title: classInfo.coursename, + start: moment().format("YYYY-MM-") + moment().day('Tuesday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', + end: moment().format("YYYY-MM-") + moment().day('Tuesday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', + color: materialColors[colorCounter], + allday: false + }); + } + + if (session[0] == 'W') { + classSchedules.push({ + title: classInfo.coursename, + start: moment().format("YYYY-MM-") + moment().day('Wednesday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', + end: moment().format("YYYY-MM-") + moment().day('Wednesday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', + color: materialColors[colorCounter], + allday: false + }); + } + + if (session[0] == 'TH') { + classSchedules.push({ + title: classInfo.coursename, + start: moment().format("YYYY-MM-") + moment().day('Thursday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', + end: moment().format("YYYY-MM-") + moment().day('Thursday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', + color: materialColors[colorCounter], + allday: false + }); + } + + if (session[0] == 'F') { + classSchedules.push({ + title: classInfo.coursename, + start: moment().format("YYYY-MM-") + moment().day('Friday')._d.toString().split(' ')[2] + 'T' + session[1][0] + ':00', + end: moment().format("YYYY-MM-") + moment().day('Friday')._d.toString().split(' ')[2] + 'T' + session[1][1] + ':00', + color: materialColors[colorCounter], + allday: false + }); + } + + colorCounter++; + } + + } + + $('#calendar').fullCalendar({ + editable: false, // Don't allow editing of events + handleWindowResize: true, + weekends: false, // will hide Saturdays and Sundays + defaultView: 'agendaWeek', // Only show week view + header: false, // Hide buttons/titles + minTime: '08:00:00', // Start time + maxTime: '21:00:00', // End time + columnHeaderFormat: 'ddd', // Only show day of the week names + displayEventTime: true, // Display event time + allDaySlot: false, + events: classSchedules + }) + + }); + +}); \ No newline at end of file