スニペットは、指定されたMODxディレクトリからイベントを取得し、日ごとのイベントを含むカレンダーを生成します。カレンダーは、目的の日にホバーすると表示されます。
以前のバージョンとの違いは何ですか？
最も重要なのは、カレンダーがサードパーティのjquery.datepickerプラグインではなく、phpによってレンダリングされることです。 Cssクラスは、プロパティに応じて各セルに関連付けられます。 すべてのクラス、曜日の名前、月はスニペットパラメータで設定されるため、簡単に変更できます。
注目を集めるための写真。
クリアランス
そのため、生成されたカレンダーは次のHTML構造になります。
<div id='Calendar'> <table class='calendar'> <tr> <td class='prev' name=' .-'> </td> <td class='month' colspan='5'> </td> <td class='next' name=' .-'> </td> </tr> <tr> <th class='dow'> </th> </tr> <tr> <td class='weekend isevent' id='calendar_1'> <div class='date'></div> <div class='event'><div> </td> </tr> </table> </div>
ご覧のとおり、イベントは日付と同じセルにあり、独自のクラスを持っています。 したがって、CSSを使用して簡単に非表示および表示できます。
装飾がほとんどなく、イベントが非表示の場合、カレンダーは次のようになります。
テーブルの各セルは、さまざまなパラメーターに応じて、cssクラスで提供されます。 これはカレンダーの2番目の機能です。外観は好きなように変更でき、クラス名はスニペットパラメータで設定されます。
デフォルトで使用されるクラスを確認します。
.calendar - .dow - .month - .workday - .weekend - .today - .isevent - .noevent - .event - div .date - div .emptyday - , .prev - .next -
したがって、カレンダーを簡単にカスタマイズして、これらのクラスに目的のデザインを割り当てることができます。 週末をハイライトしたい-それを別の色、たとえば赤にします。 月と曜日は太くすることができ、イベントがある日は青、今日は黄色です。
そして、それは次のようなものになります。
美人！
$('.isevent').live('mouseover',function() { id = this.id; $('#' + id + ' .event').show(); }) $('.isevent').live('mouseout',function() { id = this.id; $('#' + id + ' .event').hide(); })
.isevent { color: black; text-align: left; position:absolute; z-index: 10; display: none; background: #fff; border: 1px solid #AAA; padding: 5px; width: 250px; margin-top: -10px; margin-left: 10px; }
結果は次のとおりです。
divは非表示になり、セルの上にマウスを移動すると表示され、デザイン全体がcssになります。 主なものは位置です：絶対およびzインデックス：10。
すべてが簡単でシンプルです。
スニペット
スニペットコードは提供しませんが、すべてのパラメーターとプレースホルダーを提供します。
パラメータ
&id : , : [int] : id - MODx &month : date('m') : [int] : &year : date('Y') : [int] : &dateTV : event_date : [string] : TV &dateFormat : '%d %b %Y %H:%M' : [string] : , strftime() &tplEvent : tplEvent : [string] : MODx &tplMain : tplCalendar : [string] : MODx &calendar_id : Calendar : [string] : . , &class_calendar : calendar : [string] : css &class_dow : dow : [string] : css &class_month : month : [string] : css &class_workday : workday : [string] : css &class_weekend : weekend : [string] : css &class_today : today : [string] : css &class_event : event : [string] : css div &class_isevent : isevent : [string] : css &class_noevent : noevent : [string] : css &class_date : date : [string] : css &class_emptyday : emptyday : [string] : css , &class_prev : prev : [string] : css &class_next : next : [string] : css &dow_names : &lang : [string] : , , . , . &month_names : &lang : [string] : , , . , . &btn_prev : '«' : [string] : &btn_next : '»' : [string] : &lang : 'en' : [en,ru] : &show_errors : 1 : [0|1] : , - &first_day : 0 : [0|1] : 0 - - . 1 - - .
プレースホルダー
このスニペットは、装飾にcssクラス名を持つサービスプレースホルダーを使用します。上記で説明したパラメーターを使用して、それらを変更できます。 これらのホルダーに触れる必要はありません。
[+ec.Calendar+] , [+ec.calendar_id+] [+ec.class_calendar+] css [+ec.class_dow+] css [+ec.class_month+] css [+ec.class_workday+] css [+ec.class_weekend+] css [+ec.class_today+] css [+ec.class_event+] css [+ec.class_isevent+] css [+ec.class_noevent+] css [+ec.class_date+] css [+ec.class_emptyday+] css [+ec.class_prev+] css [+ec.class_next+] css
また、イベント値を置換するためのプレースコーダーもあります。
[+ec.num+] . , . , TV . , . [+ec.date+] . [+ec.url+] . [+ec.title+] , pagetitle MODx. [+ec.desc+] , introtext MODx.
アーカイブをダウンロードして解凍します。 MODx管理パネルでeventsCalendar2スニペットを作成し、eventsCalendar2.snippet.phpファイルの内容をコピーします。
2つのチャンクtplEvent2とtplCalendar2を作成します。これらはそれぞれ、eventsCalendar2.tplEvent.htmlとeventsCalendar.tplCalendar2.htmlです。
新しいMODxドキュメントを作成し、スニペットを呼び出します。
[!eventsCalendar2? &id=`13` &calendar_id=`Cal1` &dateTV=`event_date` &dateFormat=`%d %b %Y %H:%M` &tplEvent=`tplEvent2` &tplMain=`tplCalendar2` !]
カレンダーを英語に翻訳する場合-日と月の名前を変更します。 また、1つのページで複数のカレンダーを呼び出すことができます-全員に自分の＆calendar_idを表示するだけです。
tplCalendar2チャンクにはカレンダーデザイン全体が含まれています。必要に応じて変更できますが、プレースホルダーの名前は変更しないでください。
前のカレンダーの欠点はなくなりました。 すべてがスマートかつスムーズに機能します。
質問や提案がある場合-何かを書くことをheしないでください-私はトピックを補足します。
バグレポートをここに投稿します。ユーザーがカレンダーを気に入った場合は、MODxリポジトリに送信します。
スニペットとチャンクを含むアーカイブをダウンロードします 。
仕事中のカレンダーを表示します（革命版） 。
UPD。
qTipを取り除き、トピックとアーカイブをスニペットで更新しました。
UPD.2
英語を追加しました。 3つのパラメーターを追加：＆lang、＆first_day、＆show_errors。 パラメータの説明を更新し、スニペットの新しいバージョンをアップロードしました。
UPD.3
生成されたコードはW3C標準に合わせられ、バリデーターを渡します。
readme.htmlアーカイブに追加されました。
トピックのリンクを更新しました。
UPD.4
イベントは目的の月にのみ選択されるようになり、システムの負荷が大幅に軽減されます。
テンプレートでTVパラメータとリソースプロパティを使用する機能が追加されました。
タイムゾーンがホスティングと一致しないサイトに対して、時間とtime_shiftのタイムシフトパラメーターを追加しました。
デフォルト設定はロシア向けに設定されています。 週は月曜日から始まり、言語はロシア語です。
新しいプレースホルダーに従って、チャンクtplEvent2を変更しました。
プロジェクトはcode.google.comに向けて出発しました 。 さらなる開発があります。
UPD.5
Redid for Revolutionは、Google Codeからダウンロードできます。