更改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事件的颜色 的相关文章

  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
  • Twisted 的 Deferred 和 JavaScript 中的 Promise 一样吗?

    我开始在一个需要异步编程的项目中使用 Twisted 并且文档非常好 所以我的问题是 Twisted 中的 Deferred 与 Javascript 中的 Promise 相同吗 如果不是 有什么区别 你的问题的答案是Yes and No
  • 限制文本区域中每行的字符数

    我整个周末都在寻找解决这个难题的方法 但尚未找到一个可以正常工作的解决方案 我想要实现的是限制文本区域中每行的字符数 不是相同地限制它们 而是我选择的每行不同的字符数 例如 我只想在我的文本区域中包含 4 行 第 1 2 和 3 行将限制为
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 未捕获的引用错误:myFunction 未定义[重复]

    这个问题在这里已经有答案了 这到底是怎么回事 http jsfiddle net sVT54 http jsfiddle net sVT54
  • 禁用 JavaScript 中的右键单击

    当我尝试禁用右键单击时 它不起作用 我尝试使用下面的代码 document onclick function e console log e button if e button 2 e preventDefault return fals
  • 如何改变HTML5视频的播放速度?

    如何更改 HTML5 中的视频播放速度 我查过视频标签的属性 https www w3schools com html html5 video asp在 w3school 但无法做到这一点 根据这个网站 http www chipwreck
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • KeyboardEvent.keyCode 已弃用。这在实践中意味着什么?

    根据 MDN 我们绝对应该not正在使用 keyCode财产 它已被弃用 https developer mozilla org en US docs Web API KeyboardEvent keyCode https develope
  • React无限滚动scrollableTarget动态获取id?

    我在我的项目中使用react infinite scroll component 如何让scrollableTarget动态获取item id 我试过这样scrollableTarget item id 但它不起作用 必须与该 div 具有
  • Keycloak javascript 适配器 `keycloak.init` 加载 404 iframe

    我正在尝试使用 javascript 适配器将 Keycloak 集成到我的客户端应用程序keycloak js 但是 我似乎无法让它发挥作用 这是我的代码 const keycloak new Keycloak realm my real
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • Express.js Passport认证自动失败跳过策略

    UPDATE 我已将代码从护照本地注册内部移至单独的处理程序 并且运行良好 问题在于 Passport 和本地注册的使用 但我不知道为什么 我使用 Node js Express Passport 进行身份验证和注册设置 这是以前使用过的标
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li
  • 如何更改订阅值?使用 rxJS

    我正在创建一个计时器 需要你的帮助 我刚刚学习 Angular 和 rxJS 对此我有一些疑问 我正在创建一个具有启动 停止 暂停 重置功能的计时器 并且 btn Reset 必须将我的计时器 暂停 到 300 毫秒 怎么做 D 我的启动定
  • Bootstrap 3 / 显示模式不适用于 javascript 方式

    我用Modal http getbootstrap com javascript modalsBootstrap 3 0 的功能 我有这个代码 a href myNestedContent Open the modal containing
  • 如何调试 Gulp 任务?

    如何调试我的中定义的 gulp 任务gulpfile js使用诸如 Google Chrome 调试器之类的调试器逐行单步执行任务的代码 对于 Node js 6 3 版本 您可以使用 inspect flag https nodejs o

随机推荐

  • 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