Tested in PowerSchool 9.0.x
By default, the PowerSchool stock page for the school calendar (/admin/schoolsetup/calendarsetup/calendarsetup.html) shows the first month in the current school year when you access it (via School Setup -> Calendar Setup).
We can change this behavior, though, by means of the scheddate parameter, making the page open at the current month instead. We can then identify the row that defines today’s date and make it stick out.
First we want to make sure that today’s date is passed as a parameter to the page itself.
So we check if there already was a variable called scheddate that got sent to the page.
If there wasn’t, we send it straight away (by means of adding it to the current URL string and then redirecting the browser to the newly created URL).
We accomplish this by adding the 3 lines below to the head section of the page, just after the <head> tag:
~[if.~(gpv.scheddate)=]
~[redirect:~[self]?scheddate=~[date]]
[/if]
Then we need to format the current date (~[date]) to fit the formatting of the dates as they are displayed on the first column of the big table (ex. Thu, Nov 5).
Once this is done, we need to look through all the cells in the first column of the table and find the one that matches today’s date.
Then, once the matching cell/row is identified, we will change its background color so it would be easier to “spot it in the crowd”.
We will accomplish all of these through the small piece of JavaScript/jQuery code below:
//once the content of the page has been loaded into the browser
$j(document).ready(function(){
//create a Date Object from the date string outputted by the PowerSchool code “~[date]”
var now = new Date(“~[date]”);
//create a Date Object from the date string passed via the “scheddate” parameter
var scheddate = new Date(“~(gpv.scheddate)”);
//create an array of 3-letter week day names
var weekdayNames = new Array(“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”);
//create an array of 3-letter month names
var monthNames = new Array(“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”);
//return the Date Object as a string, using locale conventions
var dateString = now.toLocaleDateString();
//get the 3-letter week day corresponding to the day of the week we are currently in -> getDay() returns 0 – 6 corresponding to Sunday – Saturday
var weekday = weekdayNames[now.getDay()];
//get the 3-letter month name corresponding to the month we are currently in -> getMonth() returns 0 – 11 corresponding to January – December
var month = monthNames[now.getMonth()];
//build the date string that will look like this: “Thu, Nov 5”
var dateString = weekday + ‘, ‘ + month + ‘ ‘ + now.getDate();
//only if the current month is equal to the month of the passed “scheddate” parameter then do
if (now.getMonth() == scheddate.getMonth()){
//loop through all rows in the main table
$j(“table tbody tr”).each(function(){
//if the text in the first cell of the current row is equal to the date string above
if ($j(this).find(“td:first”).text() == dateString){
//remove the color of the row it was found on
$j(this).removeAttr(‘bgColor’);
//change the background color of the row to “blue-gray”
$j(this).css(‘background-color’, ‘#BAD3E5’);
//once a match is found, break/exit the loop
return false;
}
});
}
});
Easy, isn’t it? 🙂
Please let me know if you found this small customization useful or if it gave you any ideas you would like to pursue (and perhaps would want to share).
PS Help 911 