私たちの知識を使って、標準的なダッシュボードカレンダーを教えて、休業日や休日を表示しましょう。
ウィジェットソースは/Library/Widgets/iCal.wdgtディレクトリにあります。 Calendar.cssファイルで月のデザイン（通常、「ミュート」、強調表示）を見つけ、そこに非稼働日のスタイルを追加します。 既存のものと同様に、 .calendar-dayOfMonthNumberHolidayと呼びましょう。
最も簡単な方法は、標準スタイルのコピーペーストを作成することですが、美観上の理由から、次のようにコードを再設計しました。
.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); }
次に、Calendar.jsファイルに2012年の祝日と週末のリスト（ calend.ruの生産カレンダーに基づく）と「祝祭日」をチェックする機能を追加します。
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; }
drawGrid関数の1行を修正して、番号のクラスを公開します。
dateSpan.setAttribute ("class", isHoliday(ourMonth, date) ? "calendar-dayOfMonthNumberHoliday" : "calendar-dayOfMonthNumberNormal");
変更を有効にするには、ダッシュボードからウィジェットを削除して、再度追加する必要があります。 ちなみに、開発プロセス中に結果を頻繁に見る必要がある場合は、Finderまたはターミナル（/Library/Widgets/iCal.wdgtを開く）から直接ウィジェットの新しいコピーを起動できます。
あなたは次のように尋ねます。「これらのウィジェットですべてが非常に単純な場合、多くのサイトが提供できるものについて考えさえしないのはなぜですか？ たとえば、 Gismeteo ？」 いい質問です。 主に彼のために、この小さな記事が書かれました。