Question

我正在使用完整日历（http://fullcalendar.io）来实现日历。我的数据库中有一个表，该表具有以下行- DB table

这是我的观点-

@model IEnumerable<Fit.Models.Events>

@{
    ViewBag.Title = "Calendar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Fit</title>
    <link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/Content/calendar.css" rel="stylesheet" />
    <link href="~/Content/jquery-ui.theme.min.css" rel="stylesheet" />
 </head>
 <body>

    <div id="calendar"></div>
    <div style="display: none">

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.StartTime)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.EndTime)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.User.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IsConfirmed)
            </th>
        </tr>

        @foreach (var item in Model)
        {
            <tr class="events">
                <td class="title">
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td class="start">
                    @Html.DisplayFor(modelItem => item.StartTime)
                </td>
                <td class="end">
                    @Html.DisplayFor(modelItem => item.EndTime)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.User.FirstName)
                </td>
                <td class="confirmed">
                    @Html.DisplayFor(modelItem=> item.IsConfirmed)
                </td>
            </tr>
        }

    </table>
</div>
</body>
</html>

@section Scripts {
    @Scripts.Render("~/bundles/calendar")
}

这是JavaScript-

var events = [];
$(".events").each(function () {
    var title = $(".title", this).text().trim();
    var start = $(".start", this).text().trim();
    var end = $(".end", this).text().trim();
    var allDay = "false";
    var confirmed = $(".confirmed", this).text().trim();
    var colour = "green";
    var textColour = "white";
    if (confirmed == "False") {
        colour = "yellow";
        textColour = "red";
    }

    var event = {
        "title": title,
        "start": start,
        "end": end,
        "allDay": allDay,
        "color": colour,
        "textColor": textColour
    };
    events.push(event);
});

$("#calendar").fullCalendar({
    themeSystem: 'jquery-ui',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
    },
    locale: 'au',
    events: events,
    selectable: true,
    selectOverlap: false,
    validRange: function (nowDate) {
        return {
            start: nowDate.subtract(1,'days')
        };       
    },
    handleWindowResize: true,
    height: 450,
    aspectRatio: 0.5,
    displayEventTime: true,
    timeFormat: 'H:mm',

    select: function (start, end, allDay, jsEvent, view) {
        var d = new Date(start);
        var d2 = new Date(end);
        var m = new moment(d).format("DD-MM-YYYY HH:mm:ss");
        var m2 = new moment(d2).format("DD-MM-YYYY HH:mm:ss");
        m = encodeURIComponent(m);
        m2 = encodeURIComponent(m2);
        var uri = "/Events/Create?date=" + m + "&date2=" + m2;
        $(location).attr('href', uri);
    }
});

问题在于尝试设置日历上事件的颜色。我的意图是为IsConfirmed为False的事件设置绿色和白色，为IsConfirmed为False的事件设置黄色和红色。目前，两个事件都以绿色和白色显示，这是不正确的，因为其中一个事件已确认为假。

我在做什么错？如果我错过了任何事情，请告诉我！

Answer 1

所以我弄清楚出了什么问题。 IsConfirmed属性是一个布尔属性（我本该在我的原始帖子中提到这一点，我不好，我认为这没有关系）。这就是问题的原因。

要弄清楚发生了什么，我在Javascript中编写了console.log（已确认），以检查它是否从HTML中获取了值。它是空的。我删除了结尾的.text().trim()，然后再次检查。这次控制台显示已解析对象。因此，我们能够通过解析HTML来获取对象，但不能从其中获取文本。

然后在上面的注释中查看@ADyson的JSFiddle，我发现他正在为IsConfirmed使用字符串值。这使我想知道字段的数据类型是否引起了某些问题。

在浏览器上查看页面的源代码，我发现@Html.DisplayFor将IsConfirmed属性转换为用于显示而不是值的复选框。因此，无法将复选框转换为文本（我在JavaScript中所做的事情）。

在研究此问题时，我遇到了here。

我将IsConfirmed从@Html.DisplayFor更改为@Html.DisplayTextFor，从而解决了问题。

JavaScript如果在全日历上设置事件颜色的其他条件不起作用

1 个答案: