2010-09-07 54 views
0

我的問題是日曆在JSON響應發送到瀏覽器之前呈現。換句話說,當我們進入數組搜索時,我的數組是空的。我將如何解決這個問題?jQuery DatePicker內聯突出顯示某些日期

更新:我放棄了試圖要求更改月份的更多日期,所以現在我只需在第一次通話中獲得大約6個月的事件並一次顯示所有事件。以下是工作代碼。

$(document).ready(function() { 
     var actionCalDates = []; 
     //var orgID = 0; 
     var currentDate = new Date(); 
     dateCount = 0; 
     getDates(1, currentDate.getMonth(), currentDate.getFullYear()); 

     function displayCalendar() { 
      $("#calendar").datepicker({ 
       dateFormat: 'dd/mm/yyyy', 
       beforeShowDay: function (thedate) { 
        var theday = (thedate.getMonth() + 1) + "/" + thedate.getDate() + "/" + thedate.getFullYear(); 
        //console.log("Before the if my array contains: " + actionCalDates); 
        if ($.inArray(theday, actionCalDates) == -1) { 
         //console.log(theday + " Not Found"); 
         return [false, "", ""]; 
        } else { 
         //console.log(theday + " Found"); 
         return [true, "specialDate", "Actions Today"]; 
        } 
       } 
      }); 
     } 

     function getDates(orgID, month, year) { 
      dateCount += 1; 
      if (dateCount < 4) { 
       $.ajax({ 
        url: "/Calendar/getEvents", 
        data: { 
         'orgID': orgID, 
         'month': month, 
         'year': year 
        }, 
        type: "GET", 
        dataType: "json", 
        success: function (result) { 
         //console.log(result); 
         for (var i in result) { 
          actionCalDates.push(result[i]); 
          //console.log("Pushed to the array: " + actionCalDates[i]); 
         } 
         //console.log("Array currently holds: " + actionCalDates); 
         displayCalendar(); 
        } 
       }); 
      } 
     } 
    }); 

代碼C#幕後控制人:

public JsonResult getEvents(int orgID, int month, int year) 
    { 
     DateTime orgDate = Convert.ToDateTime(month + "/" + orgID + "/" + year); 
     var fromDate = orgDate; 
     var toDate = orgDate.AddMonths(7); //last month and the next 6 months 

     var events = db.Events.Where(e => e.StartDate >= fromDate && e.EndDate <= toDate).ToArray(); 
     var eventlist = from e in events 
         select new 
         { 
          date = e.StartDate.ToString(), 
         }; 

     List<string> EventDates = new List<string>(); 

     foreach (var currentEvent in eventlist) 
     { 
      DateTime dt; 
      dt = Convert.ToDateTime(currentEvent.date.ToString()); 
      EventDates.Add(dt.Month + "/" + dt.Day + "/" + dt.Year); 
     } 

     return Json(EventDates, JsonRequestBehavior.AllowGet); 
    } 

回答

0

爲什麼不把$("#calendar").datepicker({呼叫AJA內X success:處理程序:

success: function (result) { 
    console.log(result); 
    for (var i in result) { 
     actionCalDates.push(result[i]); 
     console.log("Pushed to the array: " + actionCalDates[i]); 
    } 
    //actionCalDates = actionCalDates.concat(result); 
    console.log("Array currently holds: " + actionCalDates); 
    //getDates(orgID, month + 1, year); 
    //getDates(orgID, month - 1, year); 

    //Now we have filled the array, let's create our calendar.. 
    $("#calendar").datepicker({ 
     .... 
} 
+0

謝謝,它仍然不能按我想要的方式工作,即在月份更改時更新事件列表,但至少現在我可以獲得6個月的事件並一次顯示所有事件。 – jesusOmar 2010-09-07 19:36:13

+0

您可以在datepicker月份更改(應該有一些事件)上設置事件處理程序,然後在更改後重做您想要的內容。 – aularon 2010-09-07 19:54:40

+0

如果您想在月份更改時更新事件列表..您可以通過處理dateCicker的「onChangeMonthYear()」方法來執行此操作。 http://api.jqueryui.com/datepicker/#option-onChangeMonthYear – Kush 2014-10-20 05:39:02

0

將呈現日曆到一些任意函數的代碼,然後把該函數的調用在你的Ajax({成功:})函數

function renderCalendar(){ 
    $("#calendar").datepicker({ 
     ... 

    }); 
} 

success: function (result) { 
         ... 

        renderCalendar(); 
       } 
+0

謝謝,我結束了這樣做。當月份發生變化時,我仍然無法獲得新的列表,但是很好。它現在會做。 – jesusOmar 2010-09-07 19:37:22

0

我想你想的方法被稱爲onChangeMonthYear。

我已經在tutorial I wrote up中使用過它。這可能不是有史以來最漂亮的代碼,但它似乎基本上工作。

相關問題