如何更改 FullCalendar 中选定日期的背景颜色

2024-01-09

我正在尝试更改日历中所选日期的背景颜色。在我的下面的代码中,它突出显示所有点击的日期,我怎样才能只突出显示最后点击的日期?

dayClick: function (day){
  var mydate = new Date(this[0].getAttribute("data-date"));
  var dateArray = mydate.toDateString().split(" ");
  document.querySelectorAll(".calendar-mobile p")[0].innerHTML = j_monthNames[mydate.getMonth()] + " " + mydate.getDate() + "日" + "(" + j_dayNames[dateArray[0].toLocaleLowerCase()] + ")";
  document.body.classList.remove("calendar-open");

  $month = '' + (mydate.getMonth() + 1);
  $day = '' + mydate.getDate();
  $year = mydate.getFullYear();

  if ($month.length < 2) $month = '0' + $month;
  if ($day.length < 2) $day = '0' + $day;
  $dates = [$year, $month, $day].join('-');
  $('[data-date='+$dates+']').css({"color": "red", "backgroundColor": "yellow",});
},

我最终是这样解决的:

$(document).ready(function() {
  $('#calendars').fullCalendar({
    header: {
      left: 'prev',
      center: 'title',
      right: 'next'
    },
    selectable: true,
  });
});
.fc-highlight {
  background: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>

刚刚触发了.fc-highlight类,它就起作用了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改 FullCalendar 中选定日期的背景颜色 的相关文章

  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • Office excel将CORS请求作为跨域请求

    我正在尝试从我的 Excel 插件发出跨域请求 正如这里所建议的 http dev office com docs add ins develop addressing same origin policy limitations http
  • 默认情况下嵌入带字幕的 Youtube 不起作用

    我正在尝试嵌入 Youtube 电影 并希望默认情况下打开字幕 From https developers google com youtube player parameters cc load policy https develope
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • mouseover 和 mouseout 事件在子进程上触发

    代码 div div div div 如果我将鼠标悬停在Navigation the Drop Downdiv 向下滑动 如果我将鼠标移开 它会向上滑动 问题是如果我将鼠标悬停在孩子上Drop Downdiv它也向上滑 动 有谁知道我该如何
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • jQuery 在 Chrome 下发现错误元素

    我使用 jQuery 迭代 HTML 表 并动态填充每行的行号 通过在文本框中填充行号 function updateRowNums myTable find tr each function index this find input i
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 如何按字母顺序排序并先小写排序

    如何获得以下排序的结果Food to Eat然后是 食物123 显然 第二个较低的 o 应该将 要吃的食物 带到排序后的第一个项目中 我很惊讶这个问题不容易通过谷歌找到答案 这个壮举没有包含在 javascript 标准中也让我感到惊讶 F
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐

  • c# 通过单击按钮停止线程

    如何通过单击按钮结束我的线程 我通过单击按钮开始我的线程 new Thread SampleFunction Start 和我的线程 void SampleFunction int i 0 while true string Seconds
  • Ruby 调试器在 STDIN 上失败。获取用户输入

    我相信您可以轻松重现该问题 只需使用新的 RubyMine 7 1 Mac 或 Windows 版本 Ruby 2 2 创建简单的脚本 puts Hi i m gonna break your debugger user input get
  • Android onKey 带虚拟键盘

    我使用 onKey 方法捕获键盘事件 按下 public boolean onKey View arg0 int arg1 KeyEvent arg2 do something return false 这对于物理键盘按下来说效果很好 但对
  • 从 Liquid 数组中获取下一个和上一个元素

    简洁版本 我想将 1 添加到液体模板中的数字并将结果用作数组索引 capture plus one 0 plus 1 endcapture div Value of plus one plus one div div This works
  • PropTypes 在 React 中不起作用

    我正在运行 React 16 2 0 并且正在使用 PropTypes 15 6 1 我正在使用 ES6 语法和 Webpack 我试图让 PropTypes 在传递无效道具时发出警告 但它不起作用 这是代码 SimpleMessage j
  • 在 R Shiny 中读取文件

    因此 我正在 R闪亮中构建一个应用程序 要求用户上传 csv 文件 一旦被 R闪亮读入 我不确定如何实际操作该对象来使用 一般代码语法如下 用户界面文件 ui R Define UI for random distribution appl
  • 如何在 64 位 Windows 7 计算机上安装 pycrypto?

    我尝试使用安装 PyCryptopip 但它抱怨需要 vcvarsall bat 我安装了 Visual Studio 2008 但现在我得到了ValueError u path 当我尝试从安装它时pip 我尝试从下载预构建的二进制文件虚空
  • 当我从应用程序中清除数据时,Sqlite 数据库被删除

    我创造了Sqlite应用程序中的数据库 当我清除数据时settings gt applications gt manage applications the Sqlite数据库已删除 任何要保留的建议sqlite数据库原样 当您按下Clea
  • 为什么 IE11 错误地处理 Node.normalize() 的减号?

    我遇到了一个问题 即当使用 Node normalize 函数连接相邻文本节点时 具有某些字符的 DOM 文本节点在 IE 中表现得很奇怪 我创建了一个 Codepen 示例 它允许您在 IE11 中重现该错误 http codepen i
  • 从谷歌应用程序脚本预填写谷歌表单

    我有一份学生登记表 其中有学生证 这是必填字段 我有一个谷歌应用程序脚本函数 可以告诉该学生是否注册了任何课程 有没有办法通过调用 Google Apps 脚本函数 是 或 否 来自动填写注册的现场课程 是的 您可以使用表单 ID 创建预填
  • 有没有办法有条件地应用注释?

    在我的 java play 应用程序中 我有注释 RequiresAuthentication clientName CasClient 在我的控制器内 我只想在生产环境中对用户进行身份验证 如何有条件地应用注释 如果我处理身份验证的方式是
  • 在 as3 中获取对象值的最快方法

    好吧 我发誓这个问题应该无处不在 但事实并非如此 我有一个值对象 里面有很多 getter setter 它不是一个动态类 我迫切需要搜索充满它们的 ArrayCollection 搜索涵盖所有领域 因此我将使用大约 13 种不同类型的 V
  • 测试带有浮点数的元组的断言

    我有一个函数返回一个元组 其中包含一个浮点值 通常我使用assertAlmostEquals比较它们 但这不适用于元组 此外 元组还包含其他数据类型 目前 我正在单独断言元组的每个元素 但这对于此类元组的列表来说太多了 对于这种情况 有什么
  • 如何让 JavaScript 随着时间的推移(而不是立即)写入结果?

    我有一个程序 它会写入很多 if 结果 例如 这个 const a prompt for let i 1 i lt a i console log i 不是实际的代码 因此 当您输入一个大数字时 会有大量答案等待输入控制台 因此 当达到某个
  • Pandas - 如何检查多索引列是否存在

    我的问题类似于如何检查 Pandas 中是否存在列 https stackoverflow com questions 24870306 how to check if a column exists in pandas但对于多索引列的情况
  • 当我尝试首先使用 EF5 代码对数据库进行逆向工程时出现异常

    该视频向我展示了如何从现有数据库使用 Code First http msdn microsoft com en us data jj572367 http msdn microsoft com en us data jj572367 所以
  • 如何从 scala play 访问发布数据?

    我有一条类型为 POST 的路线 我正在将发布数据发送到页面 我如何访问该帖子数据 例如 在 PHP 中您使用 POST 如何访问 scala 和 play 框架中的发布数据 从 Play 2 1 开始 有两种方法获取 POST 参数 1
  • Google 应用程序引擎示例应用程序抛出 503

    我已经设置了 Google 应用引擎的示例 android本教程 https developers google com cloud samples mbs getting started 当我在 EditText 中输入内容并按发送按钮时
  • 手工滚动 SOAP 请求

    我正在尝试构建一个手动 HTTP 请求 以便从我认为相当简单的 SOAP Web 服务调用返回响应 但是 我在正确构建请求时遇到了困难 并且没有得到我期望的响应 适用的wsdl声明 wsdl 目标命名空间 targetNamespace h
  • 如何更改 FullCalendar 中选定日期的背景颜色

    我正在尝试更改日历中所选日期的背景颜色 在我的下面的代码中 它突出显示所有点击的日期 我怎样才能只突出显示最后点击的日期 dayClick function day var mydate new Date this 0 getAttribu