SEARCH2025-2026 Academic Calendars
Early Release & Assessment Calendars
Employee Calendars
2026-2027 Academic Calendars
Current Events
<!--
/*#fullcalendar_div{*/
/* height: 1000px;*/
/*}*/
#fullcalendar_controls{
display: flex;
}
.calendarToggler{
margin: 10px;
}
.two-column{
color: white;
}
.column{
flex: 1;
}
function toggleCalendar(calendarId){
console.log(calendarId)
}
document.addEventListener('DOMContentLoaded', function() {
var calendars = [
// {
// // school year
// googleCalendarId: 'slusd.us_tdi3idfovaeaq78v3u8uvtjqto@group.calendar.google.com',
// color: 'rgb(97, 109, 205)', // '#616DCD'
// calName: 'Academic',
// name: 'ACAD'
// },
{
// school year
googleCalendarId: 'slusd.us_neoga3ell4et1m3o636iar1gg4@group.calendar.google.com',
color: 'rgb(42, 45, 124)', //'#2a2d7c',
calName: 'SLUSD',
name: 'SLUSD'
},
{
// board meetings
googleCalendarId: 'slusd.us_dfpuruqhc1q48a14pj4k15ml8c@group.calendar.google.com',
color: 'rgb(42, 45, 124)',
calName: 'Board',
name: 'BOARD'
},
{
// Concert Calendar
googleCalendarId: 'slusd.us_03ddj4tf55qdr9kdf813qv5ses@group.calendar.google.com',
color: 'rgb(166, 0, 18)',// '#2a2d7c',
calName: 'Concert',
name: 'CONCERT'
},
{
// school year
googleCalendarId: 'slusd.us_f78tis614sbidmjp3r8j3g5co0@group.calendar.google.com',
color: 'rgb(166, 0, 18)',//'#a60012',
calName: 'SLHS',
name: 'SLHS'
},
{
// school year
googleCalendarId: 'slusd.us_s1bt24q0simimflogdt4so4c8g@group.calendar.google.com',
color: 'rgb(0, 64, 255)', //'#0040FF',
calName: 'Garfield',
name: 'GARFIELD'
},
{
// school year
googleCalendarId: 'slusd.us_fm93b55lgl9o1289j6r7ile9ho@group.calendar.google.com',
color: 'rgb(0, 0, 0)',//'#000000',
calName: 'Madison',
name: 'MADISON'
},
{
// school year
googleCalendarId: 'slusd.us_5t2tbe5dbjtkajgopk8m88pdi4@group.calendar.google.com',
color: 'rgb(14, 79, 144)',//'#0E4F90',
calName: 'Monroe',
name: 'MONROE'
},
{
// school year
googleCalendarId: 'slusd.us_vt7vs47qhm82asukvdfius86q4@group.calendar.google.com',
color: 'rgb(62, 13, 144)',//'#3E0D90',
calName: 'Jefferson',
name: 'JEFFERSON'
},
{
// school year
googleCalendarId: 'slusd.us_kifiokl3bafv5seorsknuqcb34@group.calendar.google.com',
color: 'rgb(17, 94, 171)', //'#115EAB',
calName: 'McKinley',
name: 'MCKINLEY'
},
{
// school year
googleCalendarId: 'slusd.us_ci3iqsh8tkbii731sm9f67m4s4@group.calendar.google.com',
color: 'rgb(86, 162, 86)', // '#56A256',
calName: 'Roosevelt',
name: 'ROOSEVELT'
},
{
// school year
googleCalendarId: 'slusd.us_g5j7gv3n5kqb9s6sqbo00m00ug@group.calendar.google.com',
color: 'rgb(132, 194, 32)',//'#84C220',
calName: 'Washington',
name: 'WASHINGTON'
},
{
// school year
googleCalendarId: 'slusd.us_tp1d6ib0vel2q36rkeavq91k8k@group.calendar.google.com',
color: 'rgb(10, 55, 100)', //'#0A3764',
calName: 'Halkin',
name: 'HALKIN'
},
{
// school year
googleCalendarId: 'slusd.us_tnm3qpiiv79oh4np26fvbloc48@group.calendar.google.com',
color: 'rgb(0, 0, 255)',//'#0000FF',
calName: 'Bancroft',
name: 'BANCROFT'
},
{
// school year
googleCalendarId: 'slusd.us_o0qp1fvs5dqa0ighl98dn2glmk@group.calendar.google.com',
color: 'rgb(166, 0, 18)',//'#A60012',
calName: 'Muir',
name: 'MUIR'
},
{
// school year
googleCalendarId: 'slusd.us_9llbvs74218cia7h36mrrffnf4@group.calendar.google.com',
color: 'rgb(179, 78, 89)',//'#B34E59',
calName: 'Lincoln',
name: 'LINCOLN'
}]
// document.addEventListener('click', function() {
var renderedCalendars = [...calendars]
var calendarDiv = document.getElementById('fullcalendar_div')
var togglerLabels = document.querySelectorAll(".togglerLabel");
togglerLabels.forEach( (label) => setUpButtons(label));
function setUpButtons(label) {
label.addEventListener("click", function(){
// console.log('same check',calendars === renderedCalendars)
// console.log('calendars', calendars)
// console.log('renderedCalendars', renderedCalendars)
var calendarName = label.getAttribute("for")
var targetCalendar = renderedCalendars.find(obj => obj.name === calendarName);
var index = renderedCalendars.indexOf(targetCalendar);
// console.log(calendarName, index)
if (index !== -1) {
renderedCalendars.splice(index, 1);
} else {
// console.log(calendarName)
var addCalendar = calendars.find(obj => obj.name === calendarName);
// console.log("addCalendar =", addCalendar)
// console.log("addCalendarName =", calendarName)
renderedCalendars.push(addCalendar);
}
// calendarDiv.innerHTML('')
refreshCalendar()
toggleButton(calendarName)
// console.log(renderedCalendars)
});
}
// function showHideAll () {
// var allBtn = document.getElementById('toggleAllBtn')
// allBtn.addEventListener("click", function(){
// calendars.forEach( (calendar) => {
// var name = calendar.name
// toggleButton(name)
// })
// })
// }
function toggleButton(name){
// console.log("name ->", name)
var btn = document.getElementById(`${name}-toggle`);
// console.log("btn -> ", btn)
var calendar = calendars.find(obj => obj.name === name);
var color = calendar.color
var btnBackground = getComputedStyle(btn).backgroundColor
// console.log('click! -> ',btnBackground, color)
if (btnBackground == calendar.color){
btn.style.backgroundColor = 'white';
btn.style.color = color
// btn.style.border = `2px solid ${color}`;
btn.style.boxShadow = `inset 0 0 0 1px ${color}`
}else{
btn.style.backgroundColor = color;
btn.style.border = 'none';
btn.style.color = 'white';
// console.log(getComputedStyle(btn).backgroundColor)
}
}
function refreshCalendar(){
var calendarEl = document.getElementById('fullcalendar_div');
calendarEl.innerHTML = ''
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyBAAEI9m8xbyyepTj9jZ6M9meuAU-MmG5c',
eventSources: renderedCalendars,
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'googleCalendar' ],
defaultView: 'dayGridMonth',
contentHeight: 500,
eventRender: function(info) {
//console.log("in event render");
//console.log(info);
if(info.event.source.internalEventSource.extendedProps.calName && typeof info.event.title == "string")
{
// console.log("has a calname attr");
if(!info.event.title.startsWith(info.event.source.internalEventSource.extendedProps.calName))
{
// console.log("missing calname at start");
newTitle = info.event.source.internalEventSource.extendedProps.calName + " - " + info.event.title;
//console.log(info.el);
info.el.querySelector('.fc-content .fc-title').innerHTML = newTitle;
}
}
}
});
calendar.render();
}
refreshCalendar()
})
-->
<!-- -->
<!--
-->
<!--
-->
<!-- -->
<!--
-->