如何更改 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 中选定日期的背景颜色 的相关文章

  • For 循环覆盖 HTML 中的文本

    我的数组称为myEmployees其中有 5 个名字 但当我运行代码时 它只打印出其中的 3 个 我相信这种情况正在发生 因为for脚本中的循环会覆盖它在 HTML 文档中编写的前一行 我怎样才能解决这个问题 年度公告板公告 恭喜泰勒 你在
  • Chrome 将 0 宽度的表格单元格显示为 1px

    在 Firefox 中 我相信是正确的 由于 width 0 看不到红色 div 但在 Chrome 中 它显示为具有 1px 宽度 这似乎是最新版本 Chrome 的问题 这把小提琴 http jsfiddle net bFZf4 显示问
  • firebug 打开后断点重复触发

    当我在一个站点上打开 firebug 时 我无法分析任何内容 因为每隔几秒就会在该行上触发一个断点 function function a try function b i if i i length 1 i 20 0 function c
  • 分割路径名获取路由参数

    我在我的应用程序中使用 mvc 和 jquery 我有这样的路由 url ID Controller Action 我想获取URL并将其拆分以获取jquery中的id 您可以从获得路径名的那一刻起将其拆分 var pathname wind
  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions
  • 为什么 jQuery 的 .change() 事件仅在单击鼠标右键时触发?

    我在使用 jquery 时遇到了问题 change 当我修改输入元素时发生事件 据说 每当我对所述元素进行实时更改时 该事件就会触发 但就我而言 它仅在我按下右键单击按钮后才会触发 这是我的代码laravel框架 HTML div clas
  • 是否可以加载本地版本的 JavaScript 文件而不是服务器版本?

    只是有一个简单的问题要抛出 看看是否有解决方案 假设我无法访问服务器 我加载一个网页 发现他们有一个从子文件夹加载的 Javascript 文件 比方说 scripts js some js 现在 我想在本地对此文件进行更改 并针对整个站点
  • onbeforeunload 或单击浏览器后退按钮需要帮助

    如果用户单击浏览器的后退按钮 那么我希望出现提示并要求确认 如果用户单击 确定 那么它应该导航到xx html 如果用户单击 取消 则应阻止导航 我怎样才能做到这一点 注意 我已经尝试过onbeforeunload方法 但它适用于所有导航操
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • JavaScript:String 和 Array 上的 indexOf 方法的效率差异

    我很好奇效率是否存在差异indexOf两者都可用的方法Array and String在 JavaScript 中 我以为indexOf在 String 上的效率低于在 Array 上的效率 而我的new测试结果支持了这一点 例如 var
  • 如何在phonegap中同时使用相机API选择多个图像?

    如何同时选择或拾取多个图像phonegap camera API使用时Camera DestinationType FILE URI 我一次只能选择一张图像 我可以使用以下命令在 SD 卡中选择多个文件 包括 txt pdf this ht
  • 使用 CSS 网格布局跨越所有列/行的项目

    随着 CSS 网格布局模块很快在 Firefox 和 Chrome 中发布 我想我应该尝试了解如何使用它 我尝试用一 个项目创建一个简单的网格a跨越所有行的左侧 其他项目 b c d e等 跨越各个行的右侧 跨越行右侧的项目数量是可变的 因
  • 使用 webpack 保留输出目录中的文件夹结构

    我有以下文件夹结构 index html app index tsx 与 webpack 捆绑后 我希望有以下输出目录 并将bundle js注入到index html中 dist index html dist app bundle js
  • 如果没有其他函数链接到承诺,则默认行为

    我想打开一个 确认您要取消对话框 如果没有链接其他功能 则默认导航回页面 window history back 如果我传递回调 我可能会这样做 function openCancelModal form callback if form
  • 如何使 Flexbox 父级具有其子级的宽度?

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa
  • 使用 Firefox 插件发出跨域 ajax 请求

    我对如何在 Firefox 插件中发出跨域 ajax 请求感到有点困惑 LastPass 和 Xmarks 等插件建议你可以做到这一点 但是当我尝试用 google 搜索你是如何做到这一点时 每个人似乎都说你不能 除非用户在 Firefox
  • Div 上的倾斜边框

    我正在尝试倾斜一个 div 类似于 使用 css 倾斜 div 的顶部而不倾斜文本 https stackoverflow com questions 13591584 slant the top of a div using css wi
  • 将 SVG 元素放置在图像上

    是否可以拥有以下元素并设置它们的样式 以便 SVG 对象出现在图像上 即像图像的一部分 目前它们显示在其下方的新行中 我知道我可以将图像设置为父 div 的背景图像 但不幸的是我还需要能够在父级内旋转它 所以我认为这不是一个选项 div s
  • Origin 无权使用地理定位服务 - 即使通过 HTTPS

    我有一个通过 HTTPS 使用 HTML5 地理定位的网页 它在桌面浏览器上运行良好 然而 在 iOS Safari 上 我收到错误 Origin 无权使用地理定位服务 我已确保页面上的所有内容都通过 HTTPS 加载 每个图像 每个脚本和
  • 如何在 jest 中测试调用和应用函数?

    这是我的callnapply js file const callAndApply caller object method nameArg ageArg tShirtSizeArg method call object nameArg a

随机推荐

  • 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