月のグリッドを示す 1 つの div と、選択した日付のイベントを示す 2 番目の div の 2 つの部分で構成されるカスタム カレンダーを作成しています。現在の月のカレンダー グリッドが自動的に読み込まれ、毎日のイベントの表示が正しく機能します。ただし、ユーザーがボタンをクリックして次の月または前の月を表示すると、日付をクリックすることはできなくなります。また、月の変更は、動的に読み込まれるカレンダーでは機能しなくなりました。
これは私が使用しているjQueryコードです:
<script type="text/javascript">
$(document).ready(
function() {
$('div.calendar_events').text('To view the events on any of the highlighted dates, simply click the date.');
$('div.number').click(
function(e) {
e.preventDefault();
var theDate = $(this).attr('id').split('-');
$('div.calendar_events').load('ajax/calendar_events.php?month=' + theDate[1] + '&day=' + theDate[2] + '&year=' + theDate[3]);
});
$('a.changemonth').click(
function(e) {
e.preventDefault();
var theDate = $(this).attr('id').split('-');
$('div.calendar').load('ajax/calendar_view.php?month=' + theDate[1] + '&year=' + theDate[2]);
});
});
</script>