May 4, 2012 at 16:54Extending iCal widget features on Mac OS X
An article was recently published on Habr on how to write widgets for Mac OS X Dashboard.
Let's use our knowledge to teach a standard dashboard calendar to show non-working and holidays.
Widget sources are located in the /Library/Widgets/iCal.wdgt directory . Find the design of the days of the month in the Calendar.css file (normal, “muted”, highlighted) and add the style for non-working days there; by analogy with existing, let's call it .calendar-dayOfMonthNumberHoliday .
The easiest way is to make a copy-paste of a standard style, but for reasons of aesthetics, I redesigned the code as follows:
Now we add to the Calendar.js file a list of holidays and weekends of the year 2012 (in accordance with the calend.ru production calendar ), as well as a function for checking for “festivity”:
It remains to fix one line in the drawGrid function, exposing the class for the number:
In order for the changes to take effect, you must remove the widget from the dashboard and add it again. By the way, if you often need to look at the result during the development process, a new copy of the widget can be launched directly from the Finder or from the terminal (open /Library/Widgets/iCal.wdgt).
You ask: “If everything is so simple with these widgets, why do many sites not even think about what they can provide? For example, Gismeteo ? ” Good question. Largely for his sake, this little article was written.
Let's use our knowledge to teach a standard dashboard calendar to show non-working and holidays.
Widget sources are located in the /Library/Widgets/iCal.wdgt directory . Find the design of the days of the month in the Calendar.css file (normal, “muted”, highlighted) and add the style for non-working days there; by analogy with existing, let's call it .calendar-dayOfMonthNumberHoliday .
The easiest way is to make a copy-paste of a standard style, but for reasons of aesthetics, I redesigned the code as follows:
.calendar-dayOfMonthNumberNormal,
.calendar-dayOfMonthNumberHoliday,
.calendar-dayOfMonthNumberDimmed,
.calendar-dayOfMonthNumberHighlighted
{
float: left;
position: relative;
left: 3px;
width: 16px;
padding-right: 0px;
border-right: 7px solid transparent;
margin-top: 0px;
text-align: right;
}
.calendar-dayOfMonthNumberNormal {
color: white;
}
.calendar-dayOfMonthNumberHoliday {
color: rgb(255,102,51);
}
.calendar-dayOfMonthNumberDimmed {
color: rgb(51,51,51);
}
.calendar-dayOfMonthNumberHighlighted {
color: rgb(204,255,0);
}
Now we add to the Calendar.js file a list of holidays and weekends of the year 2012 (in accordance with the calend.ru production calendar ), as well as a function for checking for “festivity”:
var holidays = [
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 14, 15, 21, 22 ],
[ 4, 5, 11, 12, 18, 19, 23, 25, 26 ],
[ 3, 4, 8, 9, 10, 17, 18, 24, 25, 31 ],
[ 1, 7, 8, 14, 15, 21, 22, 29, 30 ],
[ 1, 6, 7, 8, 9, 13, 19, 20, 26, 27 ],
[ 2, 3, 10, 11, 12, 16, 17, 23, 24, 30 ],
[ 1, 7, 8, 14, 15, 21, 22, 28, 29 ],
[ 4, 5, 11, 12, 18, 19, 25, 26 ],
[ 1, 2, 8, 9, 15, 16, 22, 23, 29, 30 ],
[ 6, 7, 13, 14, 20, 21, 27, 28 ],
[ 3, 4, 5, 10, 11, 17, 18, 24, 25 ],
[ 1, 2, 8, 9, 15, 16, 22, 23, 30, 31 ]
];
function isHoliday(month, dayOfMonth) {
return holidays[month].indexOf(dayOfMonth) != -1;
}
It remains to fix one line in the drawGrid function, exposing the class for the number:
dateSpan.setAttribute ("class", isHoliday(ourMonth, date) ? "calendar-dayOfMonthNumberHoliday" : "calendar-dayOfMonthNumberNormal");
In order for the changes to take effect, you must remove the widget from the dashboard and add it again. By the way, if you often need to look at the result during the development process, a new copy of the widget can be launched directly from the Finder or from the terminal (open /Library/Widgets/iCal.wdgt).
You ask: “If everything is so simple with these widgets, why do many sites not even think about what they can provide? For example, Gismeteo ? ” Good question. Largely for his sake, this little article was written.