安装http://fullcalendar.io/

Question

我有这个：

Index.cshtml：

<script src="@Url.Content("~/Scripts/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.7.2.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css" />

<div id="calendar"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: '',
                center: '',
                right: ''
            },
            defaultView: 'agendaDay',
            editable: false,
            events: "/Calendar/GetEvents/"
        });
    });

    //Set up the date picker and wire it's onSelect function
    //to the FullCalendar plugin.
    $("#datepicker").datepicker({
        inline: true,
        onSelect: function (dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
        }
    });

    //Set some defaults for the fullCalendar, including the URL to
    //get the data from...
    $('#calendar').fullCalendar(
        {
            theme: true,
            defaultView: "basicWeek",
            firstDay: 1,
            events: "/Schedule/GetCalendar/"
        });
</script>
<style scoped>
</style>

AgendaController：

public class AgendaController : Controller
{


    public ActionResult Index()
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";

        return View();
    }

    public ActionResult About()
    {
        return View();
    }

    private long ToUnixTimespan(DateTime date)
    {
        TimeSpan tspan = date.ToUniversalTime().Subtract(
        new DateTime(1970, 1, 1, 0, 0, 0));

        return (long)Math.Truncate(tspan.TotalSeconds);
    }   
}

我正在尝试安装免费的FullCalender Ajax插件： http ://fullcalendar.io/，但是如果我运行该应用程序并转到： http://localhost:41787/Agenda不会显示任何内容。 我将<div id="calendar"></div>放在索引视图文件中。 但是什么也没发生。 我没有看到日历。

然后将脚本放入BundleConfig中：

  bundles.Add(new StyleBundle("~/Content/css").Include(
             "~/Content/fullcalendar.css",
             "~/Content/fullcalendar.print.css"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
             "~/Scripts/fullcalendar.js" ));

但我不明白为什么我得到404 not found错误

好的，脚本现在可以正确运行，但是如果我执行以下操作，仍然看不到任何内容：

http://localhost:41787/Calendar


Request URL:http://localhost:41787/Scripts/fullcalendar.js
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4,nb;q=0.2
Cache-Control:no-cache
Connection:keep-alive

恩，我现在这样子：

<script type="text/javascript" src="~/Scripts/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.11.0.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        alert("hallo");
    });



    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month'
        },
        defaultDate: 'new Date()',
        editable: true,
        events:
            [
            {
                title: 'Bi-weekly Meeting',
                start: '2014-07-09',
                color: 'red'
            },
            {
                title: 'Tournament',
                start: '2014-07-07',
                end: '2014-07-10',
                color: 'darkorange'
            },
            {
                title: 'Test Event',
                url: 'http://google.com/',
                start: '2014-07-28'
            }
            ]
    });

因此，如果我加载页面，则会看到Hallo消息，但是通过以下行： $('#calendar').fullCalendar({

它说：

Uncaught TypeError: undefined is not a function Index:141
(anonymous function)

哦，我喜欢这样

 $(document).ready(function () {

            $("#calendar").fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month'
                },
                defaultDate: 'new Date()',
                editable: true,
                events:
                    [
                    {
                        title: 'Bi-weekly Meeting',
                        start: '2014-07-09',
                        color: 'red'
                    },
                    {
                        title: 'Tournament',
                        start: '2014-07-07',
                        end: '2014-07-10',
                        color: 'darkorange'
                    },
                    {
                        title: 'Test Event',
                        url: 'http://google.com/',
                        start: '2014-07-28'
                    }
                    ]
            });

and now it works :)

        });