JavaScript if else 在全日历上设置事件颜色的条件不起作用-6ren

JavaScript if else 在全日历上设置事件颜色的条件不起作用

转载作者：行者123 更新时间：2023-12-03 00:55:30

30

4

我正在使用完整日历 ( 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 为 True 的事件设置绿色和白色，为 IsConfirmed 为 False 的事件设置黄色和红色。目前，这两个事件均以绿色和白色显示，这是不正确的，因为其中一个事件的 IsConfirmed 为 false。

我做错了什么？如果我错过了什么，请告诉我!

最佳答案

所以我弄清楚出了什么问题。 IsConfirmed 属性是一个 bool 属性(我应该在我原来的帖子中提到这一点，我的错。我认为它不相关)。这就是问题的原因。

为了弄清楚发生了什么，我在 Javascript 中编写了 console.log(confirmed) 来检查它是否从我的 HTML 中获取了值。里面是空的。我删除了尾随的 .text().trim() 然后再次检查。这次控制台显示一个对象已被解析。因此，我们可以通过解析 HTML 来获取对象，但不能从中获取文本。

然后看看@ADyson的JSFiddle在上面的评论中，我看到他使用 IsConfirmed 的字符串值。这让我想知道该字段的数据类型是否导致了一些问题。

在浏览器上查看页面的源代码，我发现 @Html.DisplayFor 将 IsConfirmed 属性转换为用于显示的复选框，而不是值。所以没有办法将复选框转换为文本(我在 JavaScript 中所做的)。

在研究这个问题时，我达到了 here 。

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

关于JavaScript if else 在全日历上设置事件颜色的条件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52860453/

30

4

0

文章推荐： javascript - 一键从 redux 存储中添加/删除对象

文章推荐： azure - 如何通过委派解决子网上专用端点的问题？

apache服务器全局配置详解(全)
Apache服务器全局配置之服务器标识配置篇服务器标识相关指令： ServerName ServerAdmin ServerSignature ServerTokens UseCanonical
JavaScript中常用的正则表达式日常整理(全)
//校验是否全由数字组成 ? 1
日常整理python执行系统命令的常见方法(全)
具体内容如下： 1 os.system 例如 ipython中运行如下命令，返回运行状态status os.system('cat /etc/passwdqc.conf') min=disab
Mysql语句快速复习教程(全)
基本操作查看数据库 ? 1
Xcode使用教程详细讲解(全)
Xcode使用教程详细讲解是本文要介绍的内容，Xcode是一个款强大的IDE开发环境，就像你在写Windows程序时需要VS2005一样需要要Xcode为你写Mac程序提供环境。因此，如果你要成为
PHP图片验证码制作实现分享(全)
就如今天遇到随即函数rand();脑海中想到用它做点啥好呢，最后想起了验证码，数字验证码，字母验证码，中文验证码，可是自己不会呀，咋办呢，上网搜，看别人的代码，开不懂，看视频，听老师讲，将其中所遇到
nginx安装及配置支持php的教程(全)
pcre-7.8.tar.gz 正则表达式下载地址：ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/
IntelliJIDEA一站式配置【全】(提高开发效率)
IDEA常用设置（提高开发效率）本人也是IDEA编译器的忠实用户了，但是有时出于各种原因，比如更换设备等等，IDEA总是需要重新安装配置。这就让我比较苦恼，因为总是记不全自己之前都修改了
iOS获取当前设备型号等信息(全)包含iPhone7和iPhone7P
? 1 2
ThinkPHP 连接Oracle数据库的详细教程[全]
1、操作环境搭建系统：Windows7 旗舰版 64位 PHP环境：wampserver2.2e-php5.4.3-httpd2.2.22-mysql5.5.24 32
ajax - 全 Ajax 站点的优点和缺点？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 去年关闭。 Improve th
Css 全 Angular 问题
我已经为我在 Adobe Fireworks Cs5 中构建的页面生成了 css，我想知道如何为我的标题和其他 div 设置完整宽度。我将显示标题部分的 css 代码。 @charset "utf
html - 全 div 宽度的文本框和按钮
您好，我希望表单宽度为 100%。我希望文本框几乎延伸整个页面的宽度，并在文本框的右侧直接放置小的“GO”按钮，所有按钮都在同一行(或 block )上。现在我的文本框只有其中文本的宽度(“在此处输
css - 全 Angular 页脚不会粘在底部
我没有设法将全宽页脚粘贴到网页底部。当页脚上方的主要内容低于一定高度时，页脚下方有一个空白区域。我尝试使用各种解决方案，例如以下 css 代码: html,body { margin:0; padd
HTML 全 Angular 表格
我想要一个全宽的表格。当我给 position:fixed; 它变成全宽但可滚动不起作用。简而言之，我需要一个与浏览器主体没有任何边距的表格。 body { font-family: "Helv
javascript - 全 Javascript 网页的优点
我注意到很多大型网站(如 Google 和 Facebook)在查看页面源代码时 99% 的源代码都是 JavaScript。有人知道这种方法相对于常规 HTML+JavaScript 页面的优势吗
html - 全 Angular 两列html
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this q
jquery - 全 Angular 问题
由于某种原因，我网站上的图片不再是全宽的。据我所见，所有内容都设置为 100% 宽度。 http://cargocollective.com/btatest 我是不是什么地方都没有？最佳答案我认
CSS 全 Angular 列表元素
我正在创建一个菜单并尝试使用 CSS 制作全宽菜单。但是，我不确定菜单项将如何出现在菜单中。这是问题的截图: 问题出在我得到的“GAP”中。如果我有固定数量的元素，我知道我可以使用这个逻辑: ul
c - 全 1 的最大方阵子矩阵
这个问题在这里已经有了答案: Puzzle: Find largest rectangle (maximal rectangle problem) (6 个答案) 关闭 9 年前。给定一个二元矩阵

首页

博学

6Ren·AI

商城

JavaScript if else 在全日历上设置事件颜色的条件不起作用