pass a list of dates to a JQuery calendar

Question

does anyone have any idea how I can pass a list of dates in code behind to a calendar, so it will highlight the dates which are in the list. thank you

    <script>
        $(function () {
        $("#datepicker").datepicker();
        });
    </script>

   <p>Date: <input type="text" id="datepicker" /></p>

list of dates stored in code behind:

DateTime start = new DateTime(2013, 02, 20);
        DateTime end = new DateTime(2013, 01, 11);

        var dates = new List<DateTime>();

        for (var dt = start; dt <= end; dt = dt.AddDays(1))
        {
            dates.Add(dt);
        }

Seems like your using a reserved keyword as a variable name. I hope you will also use a ajax query to get that list of Dates. Also this might help. http://stackoverflow.com/questions/2385332/jquery-datepicker-highlight-dates — Musk, Feb 22 '13 at 18:30
Please refer here: [How the jquery Datepicker set some date to highlight](http://stackoverflow.com/questions/7523653/how-the-jquery-datepicker-set-some-date-to-highlight) Or [jquery datepicker highlight dates](http://stackoverflow.com/questions/2385332/jquery-datepicker-highlight-dates) — Charlie, Feb 25 '13 at 00:22

score 2 · Accepted Answer · answered Feb 25 '13 at 21:45

The simplest solution for you would be to create asp.net handler or a web page that returns the dates as json objects and use it on a beforeShowDate function inside the datepicker:

Here is the simple implementation:

var dates = []; //replace [] with ajax call to the page that returns the dates
$("#datepicker").datepicker({
      dateFormat: "dd-mm-yyyy",

      beforeShowDay: function (date) {
          var available = $.inArray(date, dates) > -1;   

          if (available) {
              return [1];   //return available date
          }
          else {
              return [0];   //return not available
          }
      }
});

Code behind would look something like this. You will have to add System.Web.Extensions.dll as a reference to be able to use JavaScriptSerializer

    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime start = new DateTime(2013, 02, 20);
        DateTime end = new DateTime(2014, 01, 11);

        var dates = new List<string>();

        for (var dt = start; dt <= end; dt = dt.AddDays(1))
        {
            dates.Add(dt.ToString("dd-MM-yyyy"));
        }

        Response.ContentType = "text/javascript";
        string json = new JavaScriptSerializer().Serialize(dates);
        Response.Write(json);
        Response.End();
    }`

Hey DZL, thanks for taking the time to reply, had a look at the code and it seems to be good...but i was short for time on this one so ended up using an asp.net calendar with a tutorial (which I didn't know about at the time) that allows you to highlight selected dates...http://www.codeproject.com/Articles/7929/Highlighting-Important-Dates-in-Calendar Thanks again for the reply though — John, Feb 26 '13 at 11:31

pass a list of dates to a JQuery calendar

1 Answers1