更改react-big-calendar事件的颜色

2024-02-04

I need to make a calendar with events and I decided to use react-big-calendar http://intljusticemission.github.io/react-big-calendar/examples/index.html. But I need to make events of different colors. So each event will have some category and each category has corresponding color. How can I change the color of the event with react? react-big-calendar same color example

Result should look something like this react-big-calendar different colors example


抱歉,我没有很好地阅读文档。可以在以下帮助下完成eventPropGetter属性。我是这样做的:

eventStyleGetter: function(event, start, end, isSelected) {
    console.log(event);
    var backgroundColor = '#' + event.hexColor;
    var style = {
        backgroundColor: backgroundColor,
        borderRadius: '0px',
        opacity: 0.8,
        color: 'black',
        border: '0px',
        display: 'block'
    };
    return {
        style: style
    };
},

render: function () {

    return (
        <Layout active="plan" title="Planning">
            <div className="content-app fixed-header">
                <div className="app-body">
                    <div className="box">
                        <BigCalendar
                            events={this.events}
                            defaultDate={new Date()}
                            defaultView='week'
                            views={[]}
                            onSelectSlot={(this.slotSelected)}
                            onSelectEvent={(this.eventSelected)}
                            eventPropGetter={(this.eventStyleGetter)}
                            />
                    </div>
                </div>
            </div>
        </Layout>
    );
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改react-big-calendar事件的颜色 的相关文章

  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • Meteor:应用程序无法在 0.9.1.1 版本上运行

    出现类似错误 Error TypeError undefined is not a function evaluating Template create anonymous function iron dynamic template j
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • firebase :: 无法读取 null 的属性“props”

    你好 我正在尝试将react router与firebase一起使用 但它给了我这个错误 无法读取 null 的属性 props 这正是代码 我正在其中使用我的反应路由器 向下代码位于作为登录面板组件的组件上 else if this em
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • 在 React 中实现 Google 登录错误 -

    我正在尝试在 React 中实现 google 登录 这是我的组件 import Fragment useEffect from react import GOOGLE CLIENT ID from some file const Goog
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • Spring Boot - 如何提供 Angular2 编译文件

    我有一个使用 Spring Boot 完成的宁静服务器 对于前端 我有一个由 Angular2 创建的应用程序 我一直在尝试将前端文件放在 tomcat 上 这样我就不需要单独提供它们 但我无法管理它 我的文件位于 Angular2 前端项
  • 对 Azure 存储 [REST][Azure Blob] 中的 PUT Blob 的 REST api 调用身份验证失败

    我正在尝试发出 PUT 请求来创建 Azure Blob 但它显示身份验证失败 我认为我在制定资源字符串或标题时犯了一些错误 这是代码 const CryptoJS require crypto js const request requi
  • 使用extjs有什么优点和缺点? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Webpack:如何覆盖 package.json 主字段?

    如何像 Bower 中那样覆盖 package json 的主字段 overrides highcharts main highcharts js 尝试创建一个与 Webpack 配置中的模块同名的别名 module exports res
  • 基于注释的 Spring bean 验证

    我正在研究一种基于注释的方法来验证 Spring bean弹簧模块 https springmodules dev java net In 本教程 http wheelersoftware com articles spring bean
  • SHA256 给出 44 长度输出而不是 64 长度

    我正在使用以下代码来执行 SHA256 public static string GenerateSaltedHash string plainTextString string saltString byte salt Encoding
  • 如果整数以前导零开头,为什么 JSON 无效?

    我正在将一些 JSON 文件导入到 Parse com 项目中 但不断收到错误 无效的键 值对 它指出有一个意想不到的 8 这是我的 JSON 的示例 Manufacturer Manufacturer Model THIS IS A ST
  • 使用某些 Object 属性从 ArrayList 中删除对象

    我正在维护一个ArrayList的物体 我的对象结构是 ID 名称和其他一些详细信息 我需要删除一个具有某个 id 值 10 的对象 并且我不想迭代该列表 有什么解决办法吗 使用 Java 8Collection removeIf http
  • 如何在Linux上创建临时文件,无论发生什么情况都会自动清理?

    我想在Linux上创建一个临时文件 同时确保该文件在我的程序终止后会消失 即使它被杀死或有人在错误的时刻执行了硬重启 做tmpfile 为我处理这一切 您似乎全神贯注于文件可能会因为某些原因而被遗忘的想法竞争条件 我没有看到为什么这是一个问
  • 配置 StructureMap.MVC5 与 Identity 配合使用的问题

    我目前正在尝试在从一开始就从未正确实现的旧版本 2 6 升级后在我们的应用程序中重新配置 StructureMap 我刚开始使用 DI 容器 并且发现很难找到较新的 StructureMap 版本的文档 我卸载了旧的 2 6 版本的 Str
  • 如何使用 JavaScript 和 sha512 算法对字符串进行哈希处理

    我尝试过使用 NPM 中的 sha512 但它一直在散列错误的内容 即我应该获取一个字符串 但它一直返回对象 所以在 PHP 中我知道我可以执行任务 hash hash sha512 my string for hashing 如何在 No
  • 安装自定义 Visual Studio 语言服务

    我按照一篇非常有用的文章的指示 为我的软件工作室的内部脚本语言编写了一个新的 Visual Studio 语言服务编写您的第一个 Visual Studio 语言服务 http www codeproject com KB recipes
  • 通过 dplyr 中的动态列名进行汇总

    所以我试图在 dplyr 中进行一些编程 但我在 enquo 和 评价 基本上我想将列更改为动态列名称 然后能够进一步操作该列 即汇总 例如 my function lt function data column quo column lt
  • 在 Visual Studio 2010 中显示当前行号和列号

    我刚刚安装了 SP1 现在在 Visual Studio 中的每个源文件底部看不到文本编辑器行号和列号 有谁知道如何重新打开此功能 如果使用 16 4 x 或更高版本的人想知道它去了哪里 它已从状态栏移动到编辑器窗口的右下角 请注意Col当
  • 如何对文档进行部分更新

    我需要有关如何更新 CouchDB 中的字段的指导 我通过控制台尝试了curl 它工作正常 但是以编程方式 我不明白如何更新特定字段 例如 名称 这是在 CouchDB 中更新文档的片段 它工作正常并返回更新后的修订 ID HttpPut
  • 如何在 Cocoa 应用程序中包含 OpenCV?

    当我使用 命令行工具 c stdc 模板创建 xCode 项目时 我能够包含并编译 opencv 标头并运行一些代码 但我想在 Cocoa 应用程序 上下文中使用 OpenCV 使用该模板创建时 当我在 main mm 中包含 OpenCV
  • 如何以编程方式设置gridview的高度android

    我想设置我的高度Gridview在我的应用程序中以编程方式 有什么办法可以实现吗 我只想在代码中的两种特殊情况下更改 gridview 高度 EDIT
  • 如何在 MapView 下方添加 TextView?

    我跟着你好视图 谷歌地图视图 http developer android com resources tutorials views hello mapview html现在我想添加一个TextView在下面的MapView 我只更改了布
  • Git 日志不显示子模块更改[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我在 ma
  • 更改react-big-calendar事件的颜色

    I need to make a calendar with events and I decided to use react big calendar http intljusticemission github io react bi