JavaScript, если еще условие для установки цвета события в fullcalendar не работает - PullRequest
Новая
       2

JavaScript, если еще условие для установки цвета события в fullcalendar не работает

0 голосов
/ 17 октября 2018

Я использую полный календарь (http://fullcalendar.io) для реализации календаря. У меня есть таблица в моей БД, которая имеет следующие строки - Таблица БД

Этопосмотреть, что у меня есть - 

@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 как True, и желтый и красный для событий с IsConfirmed как False. В настоящее время оба события отображаются зеленым и белым, что является неправильным, поскольку одно из событий IsConfirmed имеет значение false.

Что я делаю не так? Если я что-то пропустил, дайте мне знать!

1 Ответ

0 голосов
/ 19 октября 2018

Итак, я понял, что происходит не так.Атрибут IsConfirmed является логическим атрибутом (я должен был упомянуть об этом в моем исходном сообщении, мой плохой. Я не думал, что это будет актуально).Это было причиной проблемы.

Чтобы выяснить, что происходит, я написал console.log (подтверждено) в своем Javascript, чтобы проверить, получает ли он значение из моего HTML.Это было пусто.Я удалил трейлинг .text().trim() и снова проверил.На этот раз консоль показала, что объект был проанализирован.Таким образом, мы можем получить объект при разборе HTML, но без текста.

Затем, глядя на @ADyson's JSFiddle в комментарии выше, я увидел, что он использует строковые значения для IsConfirmed.Это заставило меня задуматься, не вызывал ли тип данных поля какую-то проблему.

Просматривая источник моей страницы в браузере, я увидел, что @Html.DisplayFor преобразует атрибут IsConfirmed в флажок для отображения, а не в значение.Таким образом, не было никакого способа преобразовать флажок в текст (что я делал в своем JavaScript).

При исследовании этого я достиг здесь .

Я изменил @Html.DisplayFor на @Html.DisplayTextFor для IsConfirmed, и это решило проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...