ASP.NET MVC 使用 FullCalendar

好用的Calendar   FullCalendar

Model

public class CALENDAR
{
  public string title { get; set; }
  public string start { get; set; }
  public string end { get; set; }
  public string url { get; set; }
}

View

@{
    ViewBag.Title = "Calendar";
}

@section featured {

<link href="@Url.Content("~/Scripts/fullcalendar/lib/cupertino/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Scripts/fullcalendar/fullcalendar.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/fullcalendar/lib/moment.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/fullcalendar/lib/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/fullcalendar/fullcalendar.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/fullcalendar/lang-all.js")"></script>

<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
        overflow:scroll !important;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
</style>

   <div id='calendar'></div>
<script>

    $(document).ready(function () {
        $('#calendar').fullCalendar({
            theme: true,
            lang: 'zh-tw',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            events: {
                type: 'POST',
                url: '../api/TP1025CalendarGet/CalendarData',
                error: function () {
                    alert('資料存取失敗!');
                },
                success: function (response) {
 
                }
            }
        });

    });

</script>
}

Controller

public class TP1025CalendarController : Controller
{
  //
  // GET: /TP1025Calendar/
  public ActionResult Index()
  {
      return View();
  }
}

Web API

public class TP1025CalendarGetController : ApiControllerWebBase
{
    public List CalendarData(FormDataCollection form)
    {
        List calendar = new List();

        foreach (DataRow dr in response.ds.Tables[0].Rows)
        {
            calendar.Add(new CALENDAR { title = dr["title"].ToString(), start = dr["start"].ToString(), url = "" });
        }
        return calendar;
    }
}