【JavaScript】フルAjaxで月間カレンダー

フルAjaxで月間カレンダー。
データベースに保存されている予定があれば取得してカレンダー上にも表示できるようにするためゼロから書いた。
/monthからのresponseにJSONオブジェクト



が返ってくる想定。

今月は「getMonthCalendar('now');」で
前の月は「getMonthCalendar('minus');」、
次の月は「getMonthCalendar('plus');」で取れる。



//月間カレンダーデータを取得するメソッド
function getMonthCalendar(status){
　　var today = new Date();
　　var trunkcode = "{{items['trunkcode']}}";
　　var recid = "{{items['user_record_id']}}";
　　var department = $('#month_selected_dep').val();
　　var my_department = '{{items["my_department"]}}';
　　var selected_department = "";
　　if(department!=""&&department!=null){
　　　　selected_department = department;
　　}else{
　　　　selected_department = my_department;
　　}
　　var year,month = "";
　　if(calendar_month==""||calendar_year==""){
　　　　year = today.getFullYear();
　　　　month = today.getMonth()+1;
　　　　calendar_month = month;
　　　　calendar_year = year;
　　}else{
　　　　if(status=='now'){
　　　　　　year = today.getFullYear();
　　　　　　month = today.getMonth()+1;
　　　　　　calendar_month = month;
　　　　　　calendar_year = year;
　　　　}else if(status=='minus'){
　　　　　　calendar_month-=1
　　　　　　if(Number(calendar_month)==0){
　　　　　　　　calendar_month = 12;
　　　　　　　　calendar_year -=1;
　　　　　　}
　　　　}else if(status=='plus'){
　　　　　　calendar_month+=1
　　　　　　if(Number(calendar_month)==13){
　　　　　　　　calendar_month = 1;
　　　　　　　　calendar_year +=1;
　　　　　　}
　　　　}
　　}
　　
　　//指定された年月の1日の末日を取得する
　　var firstday = new Date(calendar_year,calendar_month-1,1);
　　var lastday = new Date(calendar_year,calendar_month,0);
　　var compdate = lastday.getDate() - firstday.getDate() + 1;
　　var json = '{"trunkcode":"'+trunkcode+'","year":"'+calendar_year+'","month":"'+calendar_month+'","record_id":"'+recid+'","department":"'+selected_department+'"}';
　　$.post(
　　　　'/month',
　　　　json,
　　　　function(response){
　　　　　　$('#schedule_tbody_month').empty();
　　　　　　monthCalLabel(calendar_year,calendar_month);　　//月間カレンダーの表示期間を表示するメソッド
　　　　　　
　　　　　　//カレンダーテーブルを生成
　　　　　　var cal_table = $('<table>');
　　　　　　var table_head_week = $('<tr>');
　　　　　　table_head_week.append($('<td>').attr('style','background-color:#FF4747;color:white;text-align:center;').append("日"));
　　　　　　table_head_week.append($('<td>').attr('style','background-color:#666;color:white;text-align:center;').append("月"));
　　　　　　table_head_week.append($('<td>').attr('style','background-color:#666;color:white;text-align:center;').append("火"));
　　　　　　table_head_week.append($('<td>').attr('style','background-color:#666;color:white;text-align:center;').append("水"));
　　　　　　table_head_week.append($('<td>').attr('style','background-color:#666;color:white;text-align:center;').append("木"));
　　　　　　table_head_week.append($('<td>').attr('style','background-color:#666;color:white;text-align:center;').append("金"));
　　　　　　table_head_week.append($('<td>').attr('style','background-color:#1975FF;color:white;text-align:center;').append("土"));
　　　　　　
　　　　　　
　　　　　　//先月分を生成する必要があるかどうか、当月の1日の曜日（f_date.getDay()が0じゃない場合）を見て判断する
　　　　　　var f_date = new Date(calendar_year,calendar_month-1,1);
　　　　　　if(f_date.getDay()!=0){
　　　　　　　　var l_tr = $('<tr>');
　　　　　　　　var l_date = new Date(calendar_year,calendar_month-1,0);
　　　　　　　　for(var s=0;s<=l_date.getDay();s++){
　　　　　　　　　　lc_date = new Date(calendar_year,calendar_month-1,0-s);
　　　　　　　　　　var l_td = $('<td>').append(lc_date.getDate());
　　　　　　　　　　l_tr.prepend(l_td);
　　　　　　　　}
　　　　　　　　//当月分のカレンダーを生成
　　　　　　　　for(var i=1;i<=compdate;i++){
　　　　　　　　　　var c_date = new Date(calendar_year,calendar_month-1,i);
　　　　　　　　　　var c_td = $('<td>').append(c_date.getDate());
　　　　　　　　　　if(c_date.getDay()==0){
　　　　　　　　　　　　$('#schedule_tbody_month').append(l_tr);
　　　　　　　　　　　　l_tr = $('<tr>');
　　　　　　　　　　　　l_tr.append(c_td);
　　　　　　　　　　}else{
　　　　　　　　　　　　l_tr.append(c_td);
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　
　　　　　　　　//来月分のカレンダーを生成
　　　　　　　　//alert(lastday.getDay());
　　　　　　　　if(lastday.getDay()!=6){
　　　　　　　　　　for(var s=1;s<=7;s++){
　　　　　　　　　　　　var ll_check_day = new Date(calendar_year,calendar_month,s);
　　　　　　　　　　　　if(ll_check_day.getDay()==6){
　　　　　　　　　　　　　　var ll_td = $('<td>').append(s);
　　　　　　　　　　　　　　l_tr.append(ll_td);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　var ll_td = $('<td>').append(s);
　　　　　　　　　　　　　　l_tr.append(ll_td);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　$('#schedule_tbody_month').append(l_tr);
　　　　　　}else{
　　　　　　　　//当月分のカレンダーを生成
　　　　　　　　for(var i=1;i<=compdate;i++){
　　　　　　　　　　var c_date = new Date(calendar_year,calendar_month-1,i);
　　　　　　　　　　var c_td = $('<td>').append(c_date.getDate());
　　　　　　　　　　if(c_date.getDay()==0){
　　　　　　　　　　　　$('#schedule_tbody_month').append(l_tr);
　　　　　　　　　　　　l_tr = $('<tr>');
　　　　　　　　　　　　l_tr.append(c_td);
　　　　　　　　　　}else{
　　　　　　　　　　　　l_tr.append(c_td);
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　
　　　　　　　　//翌月の1週目を生成する必要があるかチェックする
　　　　　　　　//alert(lastday.getDay());
　　　　　　　　if(lastday.getDay()!=6){
　　　　　　　　　　for(var s=1;s<=7;s++){
　　　　　　　　　　　　var ll_check_day = new Date(calendar_year,calendar_month,s);
　　　　　　　　　　　　if(ll_check_day.getDay()==6){
　　　　　　　　　　　　　　var ll_td = $('<td>').append(s);
　　　　　　　　　　　　　　l_tr.append(ll_td);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　var ll_td = $('<td>').append(s);
　　　　　　　　　　　　　　l_tr.append(ll_td);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　$('#schedule_tbody_month').append(l_tr);
　　　　　　}
　　　　　　$('#schedule_tbody_month').prepend(table_head_week);
　　　　}
　　);
}