save calendar as png
This commit is contained in:
@@ -11,10 +11,16 @@
|
|||||||
<body>
|
<body>
|
||||||
<div style='display:flex'>
|
<div style='display:flex'>
|
||||||
<div id='calendar' style="flex-grow: 1"></div>
|
<div id='calendar' style="flex-grow: 1"></div>
|
||||||
<div>
|
<div class="card" id="header" style="text-align:center;margin:5px 0px 0px 15px;">
|
||||||
<button id="export" class="matbut" style="font-size:medium; background:#4CAF50;margin: 10px;white-space: nowrap;text-align: center;">Export
|
<h1 style="font-weight:500">Schedule</h1>
|
||||||
Schedule</button>
|
<div style="margin:5px;display: flex;flex-direction: column;">
|
||||||
|
<button id="clear" class="matbut" style="font-size:medium; background:#4CAF50;margin: 10px;white-space: nowrap;text-align: center;">Clear
|
||||||
|
All</button>
|
||||||
|
<button id="save" class="matbut" style="font-size:medium; background:#FF9800;margin: 10px;white-space: nowrap;text-align: center;">Save
|
||||||
|
as PNG</button>
|
||||||
|
<button id="export" class="matbut" style="font-size:medium; background:#FF0000;margin: 10px;white-space: nowrap;text-align: center;">Export
|
||||||
|
to ICS</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -22,6 +28,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src='js/html2canvas.min.js'></script>
|
||||||
<script src='js/calendar.js'></script>
|
<script src='js/ics.min.js'></script>
|
||||||
<script src='js/ics.min.js'></script>
|
<script src='js/calendar.js'></script>
|
||||||
@@ -74,9 +74,16 @@ Colors: Use the following - https://www.google.com/design/spec/style/color.html#
|
|||||||
border-width: 1px !important;
|
border-width: 1px !important;
|
||||||
padding: 2px 3px 2px 3px !important;
|
padding: 2px 3px 2px 3px !important;
|
||||||
vertical-align: top !important;
|
vertical-align: top !important;
|
||||||
|
border-left-width: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-row fc-widget-header {
|
||||||
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fc td {
|
.fc td {
|
||||||
|
border-top-width: 0;
|
||||||
padding: 3px !important;
|
padding: 3px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -155,10 +162,12 @@ Colors: Use the following - https://www.google.com/design/spec/style/color.html#
|
|||||||
transform: scale(0, 0);
|
transform: scale(0, 0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
transform: scale(25, 25);
|
transform: scale(25, 25);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(40, 40);
|
transform: scale(40, 40);
|
||||||
@@ -279,6 +288,18 @@ body a:visited {
|
|||||||
font-size: medium;
|
font-size: medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fc td,
|
||||||
|
.fc th {
|
||||||
|
border-color: #E7E7E7;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-time-grid .fc-slats td {
|
||||||
|
height: 1.5em;
|
||||||
|
border-bottom: initial;
|
||||||
|
border-color: #E7E7E7;
|
||||||
|
}
|
||||||
|
|
||||||
/* The Close Button */
|
/* The Close Button */
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
@@ -310,4 +331,9 @@ body a:visited {
|
|||||||
padding: 2px 16px;
|
padding: 2px 16px;
|
||||||
display: block;
|
display: block;
|
||||||
transition: width 300ms ease-in-out, height 300ms ease-in-out;
|
transition: width 300ms ease-in-out, height 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
border-width: 0px;
|
||||||
}
|
}
|
||||||
@@ -108,6 +108,37 @@ $(function () {
|
|||||||
window.open(currLink);
|
window.open(currLink);
|
||||||
}, butdelay);
|
}, butdelay);
|
||||||
});
|
});
|
||||||
|
$("#save").click(() => {
|
||||||
|
html2canvas(document.querySelector("#calendar"), {
|
||||||
|
foreignObjectRendering: true
|
||||||
|
}).then(canvas => {
|
||||||
|
var a = document.createElement('a');
|
||||||
|
a.href = canvas.toDataURL("image/png");
|
||||||
|
a.download = 'mySchedule.png';
|
||||||
|
a.click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
$("#clear").click(() => {
|
||||||
|
/*Clear the list and the storage of courses*/
|
||||||
|
chrome.storage.sync.set({
|
||||||
|
savedCourses: []
|
||||||
|
});
|
||||||
|
chrome.tabs.query({}, function (tabs) {
|
||||||
|
for (var i = 0; i < tabs.length; i++) {
|
||||||
|
chrome.tabs.sendMessage(tabs[i].id, {
|
||||||
|
command: "updateCourseList"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
updateCalendar();
|
||||||
|
chrome.browserAction.setBadgeBackgroundColor({
|
||||||
|
color: '#bf5700'
|
||||||
|
});
|
||||||
|
chrome.browserAction.setBadgeText({
|
||||||
|
text: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
$("#remove").click(() => {
|
$("#remove").click(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
chrome.runtime.sendMessage({
|
chrome.runtime.sendMessage({
|
||||||
|
|||||||
6
js/html2canvas.min.js
vendored
Normal file
6
js/html2canvas.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user