├── .gitignore ├── .storybook ├── main.js └── preview.js ├── LICENSE ├── README.md ├── dist ├── index.es.js └── index.js ├── example-1.png ├── locale.png ├── package.json ├── responsive-1.png ├── rollup.config.js ├── src ├── components │ └── bigCalendar │ │ ├── BigCalendar.js │ │ ├── day │ │ └── index.js │ │ ├── header │ │ └── index.js │ │ ├── index.js │ │ ├── week │ │ └── index.js │ │ └── weekNames │ │ └── index.js ├── index.js └── stories │ └── BigCalendar.stories.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials" 9 | ] 10 | } -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-present Mathias Lima 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to allow persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTY OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN THE EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![image](https://github.com/mathiaslima/react-big-calendar/blob/master/example-1.png) 2 | 3 | > Responsive 4 | 5 | ![image](https://github.com/mathiaslima/react-big-calendar/blob/master/responsive-1.png) 6 | 7 | # React Big Calendar 8 | 9 | > A simple and lightweight react component of a big agenda 10 | 11 | [![NPM](https://img.shields.io/npm/v/@mathiaslima/react-big-calendar.svg)](https://www.npmjs.com/package/@mathiaslima/react-big-calendar) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 12 | [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE.md) 13 | [![npm](https://img.shields.io/npm/dt/@mathiaslima/react-big-calendar.svg)](https://www.npmjs.com/package/@mathiaslima/react-big-calendar) 14 | [![npm](https://img.shields.io/npm/dw/@mathiaslima/react-big-calendar.svg)](https://www.npmjs.com/package/@mathiaslima/react-big-calendar) 15 | 16 | ## Demo 17 | 18 | coming soon 19 | 20 | ## Install 21 | 22 | ```bash 23 | npm install @mathiaslima/react-big-calendar 24 | ``` 25 | 26 | or 27 | 28 | ```bash 29 | yarn add @mathiaslima/react-big-calendar 30 | ``` 31 | 32 | ## Usage 33 | 34 | ```jsx 35 | import React from 'react' 36 | import { BigCalendar } from '@mathiaslima/react-big-calendar'; 37 | 38 | const MyView = (props) => ( 39 | ", 48 | footerTitle: `Ver mais`, 49 | eventsDay: [ 50 | { 51 | title: "Ajudante de cozinha", 52 | dotColor: "#000", 53 | }, 54 | { 55 | title: "Cozinheiro", 56 | dotColor: "#000", 57 | }, 58 | 59 | ] 60 | }, 61 | ] 62 | /> 63 | ) 64 | ``` 65 | 66 | ## LOCALE 67 | 68 | > Default is en-US 69 | 70 | ![image](https://github.com/mathiaslima/react-big-calendar/blob/master/locale.png) 71 | 72 | ```jsx 73 | import React from 'react' 74 | import { BigCalendar } from '@mathiaslima/react-big-calendar'; 75 | import en from 'date-fns/locale/en-US'; 76 | 77 | const MyView = (props) => ( 78 | ", 88 | footerTitle: `Ver mais`, 89 | eventsDay: [ 90 | { 91 | title: "Ajudante de cozinha", 92 | dotColor: "#000", 93 | }, 94 | { 95 | title: "Cozinheiro", 96 | dotColor: "#000", 97 | }, 98 | 99 | ] 100 | }, 101 | ] 102 | /> 103 | ) 104 | ``` 105 | 106 | ### Props 107 | 108 | - `eventsMonth:` 109 | ```jsx 110 | [ 111 | { 112 | date: new Date(), 113 | backgroundColor: "#f0fded", 114 | borderColor: "green", 115 | footerView: true, 116 | // footerIcon: "<>", 117 | footerTitle: `Ver mais`, 118 | eventsDay: [ 119 | { 120 | title: "Ajudante de cozinha", 121 | dotColor: "#000", 122 | }, 123 | { 124 | title: "Cozinheiro", 125 | dotColor: "#000", 126 | }, 127 | 128 | ] 129 | }, 130 | ] 131 | 132 | ``` 133 | - **Optional** 134 | - Send the event data you want to render. 135 | 136 | - `leftIcon: String | Component` 137 | 138 | - **Optional** 139 | - The button to navigate to the previous month. 140 | 141 | - `rightIcon: String | Component` 142 | - **Optional** 143 | - The button to navigate to the next month. 144 | 145 | * `onMonthChange: Function(date: Date)` 146 | 147 | - **Optional** 148 | - The callback function to be called when clicking the next and previous buttons. 149 | 150 | ```jsx 151 | () => new Date 152 | ``` 153 | 154 | 155 | * `onClickFooter: Function(date: Date, event: Object )` 156 | 157 | - **Optional** 158 | - the function is called when you click on the footer of the day card 159 | 160 | ```jsx 161 | () => { 162 | return ( 163 | { 164 | date: "2021-07-18T20:48:54.270Z", 165 | backgroundColor: "#e8f4f8", 166 | borderColor: "#399bbc", 167 | footerView: true, 168 | footerTitle: "Ver mais", 169 | eventsDay: [ 170 | { 171 | title: "Jobs hoje", 172 | dotColor: "#000" 173 | }, 174 | { 175 | title: "Jobs hoje", 176 | dotColor: "#000" 177 | } 178 | ] 179 | } 180 | ) 181 | } 182 | ``` 183 | 184 | * `onClickEvent: Function(date: Date, eventDay: Object )` 185 | 186 | - **Optional** 187 | - the function is called when you click on the day card event 188 | 189 | ```jsx 190 | () => { 191 | return ( 192 | { 193 | title: "Jobs hoje", 194 | dotColor: "#000" 195 | } 196 | ) 197 | } 198 | ``` 199 | 200 | 201 | * `small: Boolean` 202 | 203 | - **Optional** 204 | - Whether to apply the mobile styles or not. 205 | - Default value: false 206 | 207 | 208 | ## License 209 | 210 | Licensed under the MIT License, Copyright © 2021-present Mathias Lima [mathiaslima](https://github.com/mathiaslima). 211 | 212 | See [LICENSE](./LICENSE) for more information. 213 | -------------------------------------------------------------------------------- /dist/index.es.js: -------------------------------------------------------------------------------- 1 | import e,{useState as t,useEffect as n}from"react";import{format as r}from"date-fns";import{IconButton as o}from"@material-ui/core";import a from"date-fns/locale/pt-BR";import i from"@material-ui/icons/ChevronLeft";import l from"@material-ui/icons/ChevronRight";import{useTheme as c}from"@material-ui/core/styles";import s from"@material-ui/core/useMediaQuery";import f from"@material-ui/lab/Skeleton";const u=t=>{const n=e=>{let n;"left"===e?(n=new Date(t.month),n.setMonth(n.getMonth()-1)):(n=new Date(t.month),n.setMonth(n.getMonth()+1)),t.onChange(n)};return e.createElement("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},e.createElement(o,{onClick:()=>n("left"),"aria-label":"delete",size:"small"},t.leftIcon?t.leftIcon:e.createElement(i,null)),e.createElement("div",null,e.createElement("p",{style:{textTransform:"capitalize"}},(c=new Date(t.month),r(c,"MMMM '-' yyyy",{locale:a})))),e.createElement(o,{onClick:()=>n("right"),"aria-label":"delete",size:"small"},t.rightIcon?t.rightIcon:e.createElement(l,null)));var c};const p=({DayEvent:r,index:o,indexWeek:a,rmDays:i,clickEvent:f,onClickDay:u,onEventMore:p,month:d,small:y,selectDay:m,onClickFooter:v})=>{!function(){const e=c();[...e.breakpoints.keys].reverse().reduce(((t,n)=>{const r=s(e.breakpoints.up(n));return!t&&r?n:t}),null)}();const[b,h]=t({border:"#fff",background:"#fff"}),[g,x]=t([]);n((()=>{if(r.item){let e={border:"#fff",background:"#fff"};e=r.item.eventsDay?{border:r.item.borderColor,background:r.item.backgroundColor}:{border:"#fff",background:"#fff"},x(r.item.eventsDay),h(e)}}),[]);return e.createElement(e.Fragment,null,y?e.createElement("div",{onClick:()=>{if(!r.noView){let e=new Date(d);e.setDate(7*a+o+1-i),u({date:e,events:r.item})}},style:r.noView?{height:30,width:"100%",margin:"4px 4px"}:{height:30,width:"100%",margin:"4px",borderRadius:"50%",cursor:"pointer",overflow:"hidden",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},e.createElement("div",{style:r.noView?{height:30,width:"100%",margin:"4px 4px"}:{height:"30px",width:"30px",backgroundColor:b.border,borderRadius:"15px",color:b.border.includes("#fff")?"#000":"#fff",display:"flex",flexDirection:"column",boxShadow:"0px 2px 6px rgba(0, 0, 0, 0.1)",justifyContent:"center",alignItems:"center"}},e.createElement("p",null,!r.noView&&7*a+o+1-i),e.createElement("div",{style:{height:6,width:6,borderRadius:3,backgroundColor:b.background}}))):e.createElement("div",{onClick:()=>{if(!r.noView){let e=new Date(d);e.setDate(7*a+o+1-i),u({date:e,events:r.item})}},style:r.noView?{height:120,width:"100%",margin:"8px 4px"}:{height:120,width:"100%",margin:"8px 4px",boxShadow:"0px 2px 6px rgba(0, 0, 0, 0.1)",borderRadius:"5px 3px 5px 5px",borderLeft:`3px solid ${b.border}`,backgroundColor:b.background,cursor:"pointer",overflow:"hidden",display:"flex",flexDirection:"column",justifyContent:"space-between"}},e.createElement("div",{style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",fontSize:12,padding:8,paddingBottom:0,height:20}},!r.noView&&7*a+o+1-i),e.createElement("div",{style:{display:"flex",flexDirection:"column",padding:6,paddingTop:0,height:80,overflow:"hidden",textOverflow:"ellipsis"}},!!r.item&&e.createElement(e.Fragment,null,e.createElement(e.Fragment,null,g.map((t=>e.createElement("div",{onClick:()=>{f(t)},style:{display:"flex",flexDirection:"row",justifyContent:"flex-start",alignItems:"flex-start"}},e.createElement("div",{style:{height:6,width:6,borderRadius:"50%",backgroundColor:t.dotColor,marginTop:"5px"}}),e.createElement("span",{style:{fontSize:"12px",width:"100%",overflow:"hidden",marginLeft:10,textOverflow:"ellipsis"}},t.title))))))),!r.noView&&!!r.item&&r.item.footerView&&e.createElement("div",{onClick:()=>v(r.item),style:{display:"flex",flexDirection:"row",justifyContent:"space-between",padding:5,paddingTop:0,height:20,alignItems:"center",position:"relative"}},e.createElement("div",null,e.createElement("span",{style:{fontSize:"12px",marginLeft:5}},r.item.footerTitle)),r.item.footerIcon?r.item.footerIcon:e.createElement(l,{style:{fontSize:18}}))))},d=({index:r,data:o,month:a,rmDays:i,weekCount:l,small:c,selectDay:s,onEventMore:f,onClickDay:u,clickEvent:d,onClickFooter:y})=>{const[m,v]=t(r),[b,h]=t([]);return n((()=>{if(o.events){let n=[];[1,2,3,4,5,6,7].map((e=>{n.push({})}));let r=new Date(a);r.setDate(1),0===m&&[1,2,3,4,5,6,7].map(((e,t)=>{r.getDay()>t&&(n[t]={noView:!0})})),r.setDate((e=r.getMonth()+1,t=r.getFullYear(),new Date(t,e,0).getDate())),m===l-1&&[1,2,3,4,5,6,7].map(((e,t)=>{r.getDay(){n[new Date(e.date).getDay()]={item:e}})),h(n)}var e,t}),[o,l]),e.createElement("div",{style:{display:"flex",flexDirection:"row",paddingLeft:"16px",paddingRight:"16px"}},b.map(((t,n)=>e.createElement(p,{DayEvent:t,small:c,month:a,selectDay:s,onEventMore:(e,t)=>f(e,t),onClickDay:e=>u(e),clickEvent:e=>d(e),rmDays:i,indexWeek:m,index:n,onClickFooter:y}))))},y=["Domingo","Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira","Sexta-Feira","Sábado"],m=["D","S","T","Q","Q","S","S"],v=({small:t})=>e.createElement("div",{style:{display:"flex",flexDirection:"row",borderBottom:t?"none":"0.5px solid #D6D6D6",paddingLeft:"16px",paddingRight:"16px",marginBottom:10,marginTop:10,paddingTop:8,paddingBottom:8}},t?e.createElement(e.Fragment,null,m.map((t=>e.createElement("div",{style:{display:"flex",flexDirection:"row",width:"100%",justifyContent:"center"}},e.createElement("span",{style:{fontSize:14,fontWeight:"400"}},t))))):e.createElement(e.Fragment,null,y.map((t=>e.createElement("div",{style:{display:"flex",flexDirection:"row",width:"100%",justifyContent:"center"}},e.createElement("span",{style:{fontSize:14,fontWeight:"400"}},t))))));function b(e,t){return e(t={exports:{}},t.exports),t.exports 2 | /** @license React v16.13.1 3 | * react-is.production.min.js 4 | * 5 | * Copyright (c) Facebook, Inc. and its affiliates. 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */}var h="function"==typeof Symbol&&Symbol.for,g=h?Symbol.for("react.element"):60103,x=h?Symbol.for("react.portal"):60106,w=h?Symbol.for("react.fragment"):60107,E=h?Symbol.for("react.strict_mode"):60108,C=h?Symbol.for("react.profiler"):60114,D=h?Symbol.for("react.provider"):60109,S=h?Symbol.for("react.context"):60110,k=h?Symbol.for("react.async_mode"):60111,O=h?Symbol.for("react.concurrent_mode"):60111,j=h?Symbol.for("react.forward_ref"):60112,M=h?Symbol.for("react.suspense"):60113,T=h?Symbol.for("react.suspense_list"):60120,$=h?Symbol.for("react.memo"):60115,I=h?Symbol.for("react.lazy"):60116,P=h?Symbol.for("react.block"):60121,V=h?Symbol.for("react.fundamental"):60117,F=h?Symbol.for("react.responder"):60118,R=h?Symbol.for("react.scope"):60119;function _(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case g:switch(e=e.type){case k:case O:case w:case C:case E:case M:return e;default:switch(e=e&&e.$$typeof){case S:case j:case I:case $:case D:return e;default:return t}}case x:return t}}}function N(e){return _(e)===O}var A={AsyncMode:k,ConcurrentMode:O,ContextConsumer:S,ContextProvider:D,Element:g,ForwardRef:j,Fragment:w,Lazy:I,Memo:$,Portal:x,Profiler:C,StrictMode:E,Suspense:M,isAsyncMode:function(e){return N(e)||_(e)===k},isConcurrentMode:N,isContextConsumer:function(e){return _(e)===S},isContextProvider:function(e){return _(e)===D},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===g},isForwardRef:function(e){return _(e)===j},isFragment:function(e){return _(e)===w},isLazy:function(e){return _(e)===I},isMemo:function(e){return _(e)===$},isPortal:function(e){return _(e)===x},isProfiler:function(e){return _(e)===C},isStrictMode:function(e){return _(e)===E},isSuspense:function(e){return _(e)===M},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===w||e===O||e===C||e===E||e===M||e===T||"object"==typeof e&&null!==e&&(e.$$typeof===I||e.$$typeof===$||e.$$typeof===D||e.$$typeof===S||e.$$typeof===j||e.$$typeof===V||e.$$typeof===F||e.$$typeof===R||e.$$typeof===P)},typeOf:_},z=b((function(e,t){"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,n=e?Symbol.for("react.element"):60103,r=e?Symbol.for("react.portal"):60106,o=e?Symbol.for("react.fragment"):60107,a=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,l=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,s=e?Symbol.for("react.async_mode"):60111,f=e?Symbol.for("react.concurrent_mode"):60111,u=e?Symbol.for("react.forward_ref"):60112,p=e?Symbol.for("react.suspense"):60113,d=e?Symbol.for("react.suspense_list"):60120,y=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,v=e?Symbol.for("react.block"):60121,b=e?Symbol.for("react.fundamental"):60117,h=e?Symbol.for("react.responder"):60118,g=e?Symbol.for("react.scope"):60119;function x(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:var d=e.type;switch(d){case s:case f:case o:case i:case a:case p:return d;default:var v=d&&d.$$typeof;switch(v){case c:case u:case m:case y:case l:return v;default:return t}}case r:return t}}}var w=s,E=f,C=c,D=l,S=n,k=u,O=o,j=m,M=y,T=r,$=i,I=a,P=p,V=!1;function F(e){return x(e)===f}t.AsyncMode=w,t.ConcurrentMode=E,t.ContextConsumer=C,t.ContextProvider=D,t.Element=S,t.ForwardRef=k,t.Fragment=O,t.Lazy=j,t.Memo=M,t.Portal=T,t.Profiler=$,t.StrictMode=I,t.Suspense=P,t.isAsyncMode=function(e){return V||(V=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),F(e)||x(e)===s},t.isConcurrentMode=F,t.isContextConsumer=function(e){return x(e)===c},t.isContextProvider=function(e){return x(e)===l},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return x(e)===u},t.isFragment=function(e){return x(e)===o},t.isLazy=function(e){return x(e)===m},t.isMemo=function(e){return x(e)===y},t.isPortal=function(e){return x(e)===r},t.isProfiler=function(e){return x(e)===i},t.isStrictMode=function(e){return x(e)===a},t.isSuspense=function(e){return x(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===f||e===i||e===a||e===p||e===d||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===y||e.$$typeof===l||e.$$typeof===c||e.$$typeof===u||e.$$typeof===b||e.$$typeof===h||e.$$typeof===g||e.$$typeof===v)},t.typeOf=x}()}));z.AsyncMode,z.ConcurrentMode,z.ContextConsumer,z.ContextProvider,z.Element,z.ForwardRef,z.Fragment,z.Lazy,z.Memo,z.Portal,z.Profiler,z.StrictMode,z.Suspense,z.isAsyncMode,z.isConcurrentMode,z.isContextConsumer,z.isContextProvider,z.isElement,z.isForwardRef,z.isFragment,z.isLazy,z.isMemo,z.isPortal,z.isProfiler,z.isStrictMode,z.isSuspense,z.isValidElementType,z.typeOf;var W=b((function(e){"production"===process.env.NODE_ENV?e.exports=A:e.exports=z})),L=Object.getOwnPropertySymbols,J=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable; 10 | /* 11 | object-assign 12 | (c) Sindre Sorhus 13 | @license MIT 14 | */function B(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var Y=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,r,o=B(e),a=1;a1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),ne;function t(t,n,r,o,l){for(var c=t[n],s=0;snew Date),selectDate:i,onClickDay:l=(()=>new Date),onEventMore:p,onClickEvent:y=(()=>({title:"Jobs hoje",dotColor:"#000"})),onClickFooter:m=(()=>({date:"2021-07-18T20:48:54.270Z",backgroundColor:"#e8f4f8",borderColor:"#399bbc",footerView:!0,footerTitle:"Ver mais",eventsDay:[{title:"Jobs hoje",dotColor:"#000"},{title:"Jobs hoje",dotColor:"#000"}]})),rightIcon:b,leftIcon:h})=>{const[g,x]=t({1:{},2:{},3:{},4:{},5:{}}),w=function(){const e=c();return[...e.breakpoints.keys].reverse().reduce(((t,n)=>{const r=s(e.breakpoints.up(n));return!t&&r?n:t}),null)||"xs"}(),[E,C]=t(new Date),[D,S]=t(!1),[k,O]=t(i),[j,M]=t(0),[T,$]=t([]);Date.prototype.getWeekOfMonth=function(e){var t=this.getMonth(),n=this.getFullYear(),r=new Date(n,t,1).getDay(),o=new Date(n,t+1,0).getDate(),a=this.getDate()+r-1,i=1+Math.ceil((o+r-7)/7),l=1+Math.floor(a/7);return e||l<3?l:l===i?6:l},n((()=>{I()}),[]);const I=()=>{S(!0);let e={1:{events:[]},2:{events:[]},3:{events:[]},4:{events:[]},5:{events:[]},6:{events:[]}},t=new Date(E),n=0;var o,a;t.setDate(1),[1,2,3,4,5,6,7].map(((e,r)=>{t.getDay()>r&&(n+=1)})),M(n),t.setDate((o=t.getMonth()+1,a=t.getFullYear(),new Date(a,o,0).getDate())),P(t.getWeekOfMonth(!0)),r.map((t=>{t.date.getMonth()===E.getMonth()&&(e={...e,[new Date(t.date).getWeekOfMonth(!0)]:{events:[...e[new Date(t.date).getWeekOfMonth(!0)].events,t]}})})),x(e),setTimeout((()=>{S(!1)}),1)},P=e=>{let t=[];for(let n=0;n{I()}),[E]),e.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%"}},e.createElement(u,{rightIcon:b,leftIcon:h,month:E,small:o||"sm"===w||"xs"===w,onChange:e=>{a(e),C(e)}}),e.createElement(v,{small:o||"sm"===w||"xs"===w}),D?e.createElement(f,{variant:"rect",width:"100%",height:"100%"}):e.createElement("div",{style:{display:"flex",flexDirection:"column",width:"100%",flexWrap:"wrap"}},T.map(((t,n)=>e.createElement(d,{small:o||"sm"===w||"xs"===w,selectDay:new Date(k).getDate(),onClickDay:e=>{O(e),l(e)},onEventMore:(e,t)=>p(e,t),weekCount:T.length,clickEvent:e=>y(e),month:E,rmDays:j,item:t,data:g[t],index:n,onClickFooter:m})))))};le.defaultProps={eventsMonth:[],small:!1,onChangeMonth:()=>{},selectDate:new Date,onClickDay:()=>{},onEventMore:()=>{},onClickEvent:()=>{},onClickFooter:()=>({date:"2021-07-18T20:48:54.270Z",backgroundColor:"#e8f4f8",borderColor:"#399bbc",footerView:!0,footerTitle:"Ver mais",eventsDay:[{title:"Jobs hoje",dotColor:"#000"},{title:"Jobs hoje",dotColor:"#000"}]})},le.propTypes={eventsMonth:ie.array,small:ie.bool,onChangeMonth:ie.func,selectDate:ie.instanceOf(Date),onClickDay:ie.func,onEventMore:ie.func,onClickEvent:ie.func,onClickFooter:ie.func,rightIcon:ie.element,leftIcon:ie.element};export{le as BigCalendar}; 15 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("date-fns"),n=require("@material-ui/core"),r=require("date-fns/locale/pt-BR"),o=require("@material-ui/icons/ChevronLeft"),a=require("@material-ui/icons/ChevronRight"),i=require("@material-ui/core/styles"),l=require("@material-ui/core/useMediaQuery"),c=require("@material-ui/lab/Skeleton");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=f(e),u=f(r),d=f(o),p=f(a),y=f(l),m=f(c);const v=e=>{const r=t=>{let n;"left"===t?(n=new Date(e.month),n.setMonth(n.getMonth()-1)):(n=new Date(e.month),n.setMonth(n.getMonth()+1)),e.onChange(n)};return s.default.createElement("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},s.default.createElement(n.IconButton,{onClick:()=>r("left"),"aria-label":"delete",size:"small"},e.leftIcon?e.leftIcon:s.default.createElement(d.default,null)),s.default.createElement("div",null,s.default.createElement("p",{style:{textTransform:"capitalize"}},(o=new Date(e.month),t.format(o,"MMMM '-' yyyy",{locale:u.default})))),s.default.createElement(n.IconButton,{onClick:()=>r("right"),"aria-label":"delete",size:"small"},e.rightIcon?e.rightIcon:s.default.createElement(p.default,null)));var o};const b=({DayEvent:t,index:n,indexWeek:r,rmDays:o,clickEvent:a,onClickDay:l,onEventMore:c,month:f,small:u,selectDay:d,onClickFooter:m})=>{!function(){const e=i.useTheme();[...e.breakpoints.keys].reverse().reduce(((t,n)=>{const r=y.default(e.breakpoints.up(n));return!t&&r?n:t}),null)}();const[v,b]=e.useState({border:"#fff",background:"#fff"}),[h,g]=e.useState([]);e.useEffect((()=>{if(t.item){let e={border:"#fff",background:"#fff"};e=t.item.eventsDay?{border:t.item.borderColor,background:t.item.backgroundColor}:{border:"#fff",background:"#fff"},g(t.item.eventsDay),b(e)}}),[]);return s.default.createElement(s.default.Fragment,null,u?s.default.createElement("div",{onClick:()=>{if(!t.noView){let e=new Date(f);e.setDate(7*r+n+1-o),l({date:e,events:t.item})}},style:t.noView?{height:30,width:"100%",margin:"4px 4px"}:{height:30,width:"100%",margin:"4px",borderRadius:"50%",cursor:"pointer",overflow:"hidden",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},s.default.createElement("div",{style:t.noView?{height:30,width:"100%",margin:"4px 4px"}:{height:"30px",width:"30px",backgroundColor:v.border,borderRadius:"15px",color:v.border.includes("#fff")?"#000":"#fff",display:"flex",flexDirection:"column",boxShadow:"0px 2px 6px rgba(0, 0, 0, 0.1)",justifyContent:"center",alignItems:"center"}},s.default.createElement("p",null,!t.noView&&7*r+n+1-o),s.default.createElement("div",{style:{height:6,width:6,borderRadius:3,backgroundColor:v.background}}))):s.default.createElement("div",{onClick:()=>{if(!t.noView){let e=new Date(f);e.setDate(7*r+n+1-o),l({date:e,events:t.item})}},style:t.noView?{height:120,width:"100%",margin:"8px 4px"}:{height:120,width:"100%",margin:"8px 4px",boxShadow:"0px 2px 6px rgba(0, 0, 0, 0.1)",borderRadius:"5px 3px 5px 5px",borderLeft:`3px solid ${v.border}`,backgroundColor:v.background,cursor:"pointer",overflow:"hidden",display:"flex",flexDirection:"column",justifyContent:"space-between"}},s.default.createElement("div",{style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",fontSize:12,padding:8,paddingBottom:0,height:20}},!t.noView&&7*r+n+1-o),s.default.createElement("div",{style:{display:"flex",flexDirection:"column",padding:6,paddingTop:0,height:80,overflow:"hidden",textOverflow:"ellipsis"}},!!t.item&&s.default.createElement(s.default.Fragment,null,s.default.createElement(s.default.Fragment,null,h.map((e=>s.default.createElement("div",{onClick:()=>{a(e)},style:{display:"flex",flexDirection:"row",justifyContent:"flex-start",alignItems:"flex-start"}},s.default.createElement("div",{style:{height:6,width:6,borderRadius:"50%",backgroundColor:e.dotColor,marginTop:"5px"}}),s.default.createElement("span",{style:{fontSize:"12px",width:"100%",overflow:"hidden",marginLeft:10,textOverflow:"ellipsis"}},e.title))))))),!t.noView&&!!t.item&&t.item.footerView&&s.default.createElement("div",{onClick:()=>m(t.item),style:{display:"flex",flexDirection:"row",justifyContent:"space-between",padding:5,paddingTop:0,height:20,alignItems:"center",position:"relative"}},s.default.createElement("div",null,s.default.createElement("span",{style:{fontSize:"12px",marginLeft:5}},t.item.footerTitle)),t.item.footerIcon?t.item.footerIcon:s.default.createElement(p.default,{style:{fontSize:18}}))))},h=({index:t,data:n,month:r,rmDays:o,weekCount:a,small:i,selectDay:l,onEventMore:c,onClickDay:f,clickEvent:u,onClickFooter:d})=>{const[p,y]=e.useState(t),[m,v]=e.useState([]);return e.useEffect((()=>{if(n.events){let o=[];[1,2,3,4,5,6,7].map((e=>{o.push({})}));let i=new Date(r);i.setDate(1),0===p&&[1,2,3,4,5,6,7].map(((e,t)=>{i.getDay()>t&&(o[t]={noView:!0})})),i.setDate((e=i.getMonth()+1,t=i.getFullYear(),new Date(t,e,0).getDate())),p===a-1&&[1,2,3,4,5,6,7].map(((e,t)=>{i.getDay(){o[new Date(e.date).getDay()]={item:e}})),v(o)}var e,t}),[n,a]),s.default.createElement("div",{style:{display:"flex",flexDirection:"row",paddingLeft:"16px",paddingRight:"16px"}},m.map(((e,t)=>s.default.createElement(b,{DayEvent:e,small:i,month:r,selectDay:l,onEventMore:(e,t)=>c(e,t),onClickDay:e=>f(e),clickEvent:e=>u(e),rmDays:o,indexWeek:p,index:t,onClickFooter:d}))))},g=["Domingo","Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira","Sexta-Feira","Sábado"],x=["D","S","T","Q","Q","S","S"],w=({small:e})=>s.default.createElement("div",{style:{display:"flex",flexDirection:"row",borderBottom:e?"none":"0.5px solid #D6D6D6",paddingLeft:"16px",paddingRight:"16px",marginBottom:10,marginTop:10,paddingTop:8,paddingBottom:8}},e?s.default.createElement(s.default.Fragment,null,x.map((e=>s.default.createElement("div",{style:{display:"flex",flexDirection:"row",width:"100%",justifyContent:"center"}},s.default.createElement("span",{style:{fontSize:14,fontWeight:"400"}},e))))):s.default.createElement(s.default.Fragment,null,g.map((e=>s.default.createElement("div",{style:{display:"flex",flexDirection:"row",width:"100%",justifyContent:"center"}},s.default.createElement("span",{style:{fontSize:14,fontWeight:"400"}},e))))));function E(e,t){return e(t={exports:{}},t.exports),t.exports 2 | /** @license React v16.13.1 3 | * react-is.production.min.js 4 | * 5 | * Copyright (c) Facebook, Inc. and its affiliates. 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */}var C="function"==typeof Symbol&&Symbol.for,D=C?Symbol.for("react.element"):60103,S=C?Symbol.for("react.portal"):60106,k=C?Symbol.for("react.fragment"):60107,O=C?Symbol.for("react.strict_mode"):60108,j=C?Symbol.for("react.profiler"):60114,M=C?Symbol.for("react.provider"):60109,T=C?Symbol.for("react.context"):60110,$=C?Symbol.for("react.async_mode"):60111,I=C?Symbol.for("react.concurrent_mode"):60111,P=C?Symbol.for("react.forward_ref"):60112,V=C?Symbol.for("react.suspense"):60113,F=C?Symbol.for("react.suspense_list"):60120,R=C?Symbol.for("react.memo"):60115,_=C?Symbol.for("react.lazy"):60116,N=C?Symbol.for("react.block"):60121,A=C?Symbol.for("react.fundamental"):60117,z=C?Symbol.for("react.responder"):60118,W=C?Symbol.for("react.scope"):60119;function q(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case D:switch(e=e.type){case $:case I:case k:case j:case O:case V:return e;default:switch(e=e&&e.$$typeof){case T:case P:case _:case R:case M:return e;default:return t}}case S:return t}}}function L(e){return q(e)===I}var J={AsyncMode:$,ConcurrentMode:I,ContextConsumer:T,ContextProvider:M,Element:D,ForwardRef:P,Fragment:k,Lazy:_,Memo:R,Portal:S,Profiler:j,StrictMode:O,Suspense:V,isAsyncMode:function(e){return L(e)||q(e)===$},isConcurrentMode:L,isContextConsumer:function(e){return q(e)===T},isContextProvider:function(e){return q(e)===M},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===D},isForwardRef:function(e){return q(e)===P},isFragment:function(e){return q(e)===k},isLazy:function(e){return q(e)===_},isMemo:function(e){return q(e)===R},isPortal:function(e){return q(e)===S},isProfiler:function(e){return q(e)===j},isStrictMode:function(e){return q(e)===O},isSuspense:function(e){return q(e)===V},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===k||e===I||e===j||e===O||e===V||e===F||"object"==typeof e&&null!==e&&(e.$$typeof===_||e.$$typeof===R||e.$$typeof===M||e.$$typeof===T||e.$$typeof===P||e.$$typeof===A||e.$$typeof===z||e.$$typeof===W||e.$$typeof===N)},typeOf:q},B=E((function(e,t){"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,n=e?Symbol.for("react.element"):60103,r=e?Symbol.for("react.portal"):60106,o=e?Symbol.for("react.fragment"):60107,a=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,l=e?Symbol.for("react.provider"):60109,c=e?Symbol.for("react.context"):60110,f=e?Symbol.for("react.async_mode"):60111,s=e?Symbol.for("react.concurrent_mode"):60111,u=e?Symbol.for("react.forward_ref"):60112,d=e?Symbol.for("react.suspense"):60113,p=e?Symbol.for("react.suspense_list"):60120,y=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,v=e?Symbol.for("react.block"):60121,b=e?Symbol.for("react.fundamental"):60117,h=e?Symbol.for("react.responder"):60118,g=e?Symbol.for("react.scope"):60119;function x(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:var p=e.type;switch(p){case f:case s:case o:case i:case a:case d:return p;default:var v=p&&p.$$typeof;switch(v){case c:case u:case m:case y:case l:return v;default:return t}}case r:return t}}}var w=f,E=s,C=c,D=l,S=n,k=u,O=o,j=m,M=y,T=r,$=i,I=a,P=d,V=!1;function F(e){return x(e)===s}t.AsyncMode=w,t.ConcurrentMode=E,t.ContextConsumer=C,t.ContextProvider=D,t.Element=S,t.ForwardRef=k,t.Fragment=O,t.Lazy=j,t.Memo=M,t.Portal=T,t.Profiler=$,t.StrictMode=I,t.Suspense=P,t.isAsyncMode=function(e){return V||(V=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),F(e)||x(e)===f},t.isConcurrentMode=F,t.isContextConsumer=function(e){return x(e)===c},t.isContextProvider=function(e){return x(e)===l},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return x(e)===u},t.isFragment=function(e){return x(e)===o},t.isLazy=function(e){return x(e)===m},t.isMemo=function(e){return x(e)===y},t.isPortal=function(e){return x(e)===r},t.isProfiler=function(e){return x(e)===i},t.isStrictMode=function(e){return x(e)===a},t.isSuspense=function(e){return x(e)===d},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===s||e===i||e===a||e===d||e===p||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===y||e.$$typeof===l||e.$$typeof===c||e.$$typeof===u||e.$$typeof===b||e.$$typeof===h||e.$$typeof===g||e.$$typeof===v)},t.typeOf=x}()}));B.AsyncMode,B.ConcurrentMode,B.ContextConsumer,B.ContextProvider,B.Element,B.ForwardRef,B.Fragment,B.Lazy,B.Memo,B.Portal,B.Profiler,B.StrictMode,B.Suspense,B.isAsyncMode,B.isConcurrentMode,B.isContextConsumer,B.isContextProvider,B.isElement,B.isForwardRef,B.isFragment,B.isLazy,B.isMemo,B.isPortal,B.isProfiler,B.isStrictMode,B.isSuspense,B.isValidElementType,B.typeOf;var Y=E((function(e){"production"===process.env.NODE_ENV?e.exports=J:e.exports=B})),Q=Object.getOwnPropertySymbols,U=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable; 10 | /* 11 | object-assign 12 | (c) Sindre Sorhus 13 | @license MIT 14 | */function H(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var G=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,r,o=H(e),a=1;a1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),le;function t(t,n,r,o,l){for(var c=t[n],f=0;fnew Date),selectDate:o,onClickDay:a=(()=>new Date),onEventMore:l,onClickEvent:c=(()=>({title:"Jobs hoje",dotColor:"#000"})),onClickFooter:f=(()=>({date:"2021-07-18T20:48:54.270Z",backgroundColor:"#e8f4f8",borderColor:"#399bbc",footerView:!0,footerTitle:"Ver mais",eventsDay:[{title:"Jobs hoje",dotColor:"#000"},{title:"Jobs hoje",dotColor:"#000"}]})),rightIcon:u,leftIcon:d})=>{const[p,b]=e.useState({1:{},2:{},3:{},4:{},5:{}}),g=function(){const e=i.useTheme();return[...e.breakpoints.keys].reverse().reduce(((t,n)=>{const r=y.default(e.breakpoints.up(n));return!t&&r?n:t}),null)||"xs"}(),[x,E]=e.useState(new Date),[C,D]=e.useState(!1),[S,k]=e.useState(o),[O,j]=e.useState(0),[M,T]=e.useState([]);Date.prototype.getWeekOfMonth=function(e){var t=this.getMonth(),n=this.getFullYear(),r=new Date(n,t,1).getDay(),o=new Date(n,t+1,0).getDate(),a=this.getDate()+r-1,i=1+Math.ceil((o+r-7)/7),l=1+Math.floor(a/7);return e||l<3?l:l===i?6:l},e.useEffect((()=>{$()}),[]);const $=()=>{D(!0);let e={1:{events:[]},2:{events:[]},3:{events:[]},4:{events:[]},5:{events:[]},6:{events:[]}},n=new Date(x),r=0;var o,a;n.setDate(1),[1,2,3,4,5,6,7].map(((e,t)=>{n.getDay()>t&&(r+=1)})),j(r),n.setDate((o=n.getMonth()+1,a=n.getFullYear(),new Date(a,o,0).getDate())),I(n.getWeekOfMonth(!0)),t.map((t=>{t.date.getMonth()===x.getMonth()&&(e={...e,[new Date(t.date).getWeekOfMonth(!0)]:{events:[...e[new Date(t.date).getWeekOfMonth(!0)].events,t]}})})),b(e),setTimeout((()=>{D(!1)}),1)},I=e=>{let t=[];for(let n=0;n{$()}),[x]),s.default.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%"}},s.default.createElement(v,{rightIcon:u,leftIcon:d,month:x,small:n||"sm"===g||"xs"===g,onChange:e=>{r(e),E(e)}}),s.default.createElement(w,{small:n||"sm"===g||"xs"===g}),C?s.default.createElement(m.default,{variant:"rect",width:"100%",height:"100%"}):s.default.createElement("div",{style:{display:"flex",flexDirection:"column",width:"100%",flexWrap:"wrap"}},M.map(((e,t)=>s.default.createElement(h,{small:n||"sm"===g||"xs"===g,selectDay:new Date(S).getDate(),onClickDay:e=>{k(e),a(e)},onEventMore:(e,t)=>l(e,t),weekCount:M.length,clickEvent:e=>c(e),month:x,rmDays:O,item:e,data:p[e],index:t,onClickFooter:f})))))};de.defaultProps={eventsMonth:[],small:!1,onChangeMonth:()=>{},selectDate:new Date,onClickDay:()=>{},onEventMore:()=>{},onClickEvent:()=>{},onClickFooter:()=>({date:"2021-07-18T20:48:54.270Z",backgroundColor:"#e8f4f8",borderColor:"#399bbc",footerView:!0,footerTitle:"Ver mais",eventsDay:[{title:"Jobs hoje",dotColor:"#000"},{title:"Jobs hoje",dotColor:"#000"}]})},de.propTypes={eventsMonth:ue.array,small:ue.bool,onChangeMonth:ue.func,selectDate:ue.instanceOf(Date),onClickDay:ue.func,onEventMore:ue.func,onClickEvent:ue.func,onClickFooter:ue.func,rightIcon:ue.element,leftIcon:ue.element},exports.BigCalendar=de; 15 | -------------------------------------------------------------------------------- /example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mathiaslima/react-big-calendar/7e3ed14cb168fdc6d99c02c5b4d012b07b0689dd/example-1.png -------------------------------------------------------------------------------- /locale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mathiaslima/react-big-calendar/7e3ed14cb168fdc6d99c02c5b4d012b07b0689dd/locale.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mathiaslima/react-big-calendar", 3 | "version": "1.1.5", 4 | "description": "A simple react component that accepts a list of password requirements and updates each as they are fulfilled", 5 | "main": "dist/index.js", 6 | "module": "dist/index.es.js", 7 | "author": { 8 | "name": "Mathias Morais Lima", 9 | "email": "mathias.morais7@gmail.com" 10 | }, 11 | "keywords": [ 12 | "scheduler", 13 | "react-component", 14 | "react", 15 | "calendar", 16 | "events", 17 | "full calendar" 18 | ], 19 | "files": [ 20 | "dist/", 21 | "LICENSE", 22 | "README.md", 23 | "CHANGELOG.md" 24 | ], 25 | "license": "MIT", 26 | "publishConfig": { 27 | "access": "public" 28 | }, 29 | "scripts": { 30 | "start": "react-scripts start", 31 | "build-lib": "rollup -c", 32 | "storybook": "start-storybook -p 6006", 33 | "build-storybook": "build-storybook" 34 | }, 35 | "repository": { 36 | "type": "git", 37 | "url": "https://github.com/mathiaslima/react-big-calendar" 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "dependencies": { 52 | "@material-ui/core": "^4.11.4", 53 | "@material-ui/icons": "^4.11.2", 54 | "@material-ui/lab": "^4.0.0-alpha.58", 55 | "date-fns": "^2.22.1" 56 | }, 57 | "peerDependencies": { 58 | "react": "^17.0.2", 59 | "react-dom": "^17.0.2", 60 | "@material-ui/core": "^4.11.4", 61 | "@material-ui/icons": "^4.11.2", 62 | "@material-ui/lab": "^4.0.0-alpha.58", 63 | "date-fns": "^2.22.1" 64 | }, 65 | "devDependencies": { 66 | "@babel/core": "^7.12.10", 67 | "@babel/preset-react": "^7.12.10", 68 | "@rollup/plugin-node-resolve": "^11.1.1", 69 | "@storybook/addon-actions": "^6.1.16", 70 | "@storybook/addon-essentials": "^6.1.16", 71 | "@storybook/addon-links": "^6.1.16", 72 | "rollup-plugin-commonjs": "^10.1.0", 73 | "@storybook/react": "^6.1.16", 74 | "babel-loader": "^8.2.2", 75 | "react": "^17.0.1", 76 | "react-dom": "^17.0.1", 77 | "rollup": "^2.38.4", 78 | "rollup-plugin-babel": "^4.4.0", 79 | "rollup-plugin-peer-deps-external": "^2.2.4", 80 | "rollup-plugin-postcss": "^4.0.0", 81 | "rollup-plugin-terser": "^7.0.2" 82 | } 83 | } -------------------------------------------------------------------------------- /responsive-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mathiaslima/react-big-calendar/7e3ed14cb168fdc6d99c02c5b4d012b07b0689dd/responsive-1.png -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import external from 'rollup-plugin-peer-deps-external'; 4 | import { terser } from 'rollup-plugin-terser'; 5 | import postcss from 'rollup-plugin-postcss'; 6 | import commonjs from 'rollup-plugin-commonjs'; 7 | 8 | export default [ 9 | { 10 | input: './src/index.js', 11 | output: [ 12 | { 13 | file: 'dist/index.js', 14 | format: 'cjs', 15 | }, 16 | { 17 | file: 'dist/index.es.js', 18 | format: 'es', 19 | exports: 'named', 20 | } 21 | ], 22 | plugins: [ 23 | postcss({ 24 | plugins: [], 25 | minimize: true, 26 | }), 27 | babel({ 28 | exclude: 'node_modules/**', 29 | presets: ['@babel/preset-react'] 30 | }), 31 | commonjs({ 32 | namedExports: { 33 | 'react-js': ['isValidElementType'], 34 | } 35 | }), 36 | external(), 37 | resolve(), 38 | 39 | terser(), 40 | ] 41 | } 42 | ]; -------------------------------------------------------------------------------- /src/components/bigCalendar/BigCalendar.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import Header from './header'; 3 | import Week from './week'; 4 | import WeekNames from './weekNames'; 5 | import PropTypes from "prop-types"; 6 | import Skeleton from '@material-ui/lab/Skeleton'; 7 | import { ThemeProvider, useTheme, createTheme } from '@material-ui/core/styles'; 8 | import useMediaQuery from '@material-ui/core/useMediaQuery'; 9 | import en from 'date-fns/locale/en-US'; 10 | 11 | function useWidth() { 12 | const theme = useTheme(); 13 | const keys = [...theme.breakpoints.keys].reverse(); 14 | return ( 15 | keys.reduce((output, key) => { 16 | // eslint-disable-next-line react-hooks/rules-of-hooks 17 | const matches = useMediaQuery(theme.breakpoints.up(key)); 18 | return !output && matches ? key : output; 19 | }, null) || 'xs' 20 | ); 21 | } 22 | 23 | export const BigCalendar = ( 24 | { 25 | eventsMonth = [ 26 | { 27 | date: "2021-07-18T20:48:54.270Z", 28 | backgroundColor: "#e8f4f8", 29 | borderColor: "#399bbc", 30 | footerView: true, 31 | footerTitle: "Ver mais", 32 | eventsDay: [ 33 | { 34 | title: "Jobs hoje", 35 | dotColor: "#000" 36 | }, 37 | { 38 | title: "Jobs hoje", 39 | dotColor: "#000" 40 | } 41 | ] 42 | }, 43 | { 44 | date: "2021-07-18T20:48:54.270Z", 45 | backgroundColor: "#e8f4f8", 46 | borderColor: "#399bbc", 47 | footerView: true, 48 | footerTitle: "Ver mais", 49 | eventsDay: [ 50 | { 51 | title: "Jobs hoje", 52 | dotColor: "#000" 53 | }, 54 | { 55 | title: "Jobs hoje", 56 | dotColor: "#000" 57 | } 58 | ] 59 | } 60 | ], 61 | small = false, 62 | onChangeMonth = () => new Date, 63 | selectDate, 64 | onClickDay = () => new Date, 65 | onEventMore, 66 | onClickEvent = () => { 67 | return ( 68 | { 69 | title: "Jobs hoje", 70 | dotColor: "#000" 71 | } 72 | ) 73 | }, 74 | onClickFooter = () => { 75 | return ( 76 | { 77 | date: "2021-07-18T20:48:54.270Z", 78 | backgroundColor: "#e8f4f8", 79 | borderColor: "#399bbc", 80 | footerView: true, 81 | footerTitle: "Ver mais", 82 | eventsDay: [ 83 | { 84 | title: "Jobs hoje", 85 | dotColor: "#000" 86 | }, 87 | { 88 | title: "Jobs hoje", 89 | dotColor: "#000" 90 | } 91 | ] 92 | } 93 | ) 94 | }, 95 | rightIcon, 96 | leftIcon, 97 | locale = en 98 | } 99 | ) => { 100 | 101 | const [events, setEvents] = useState({ 102 | '1': { 103 | 104 | }, 105 | '2': { 106 | 107 | }, 108 | '3': { 109 | 110 | }, 111 | '4': { 112 | 113 | }, 114 | '5': { 115 | 116 | } 117 | }) 118 | const width = useWidth(); 119 | const [month, setMonth] = useState(new Date()); 120 | const [loading, setLoading] = useState(false); 121 | const [selectDateChange, setSelectDateChange] = useState(selectDate) 122 | const [rmDays, setRmDays] = useState(0); 123 | const [weekCount, setWeekCount] = useState([]); 124 | 125 | function weekOfMonth(dt) { // recebe um Date e retorna a semana do mês, baseado no valor numérico do dia 126 | return Math.ceil(dt.getDate() / 7); 127 | } 128 | 129 | Date.prototype.getWeekOfMonth = function (exact) { 130 | var month = this.getMonth() 131 | , year = this.getFullYear() 132 | , firstWeekday = new Date(year, month, 1).getDay() 133 | , lastDateOfMonth = new Date(year, month + 1, 0).getDate() 134 | , offsetDate = this.getDate() + firstWeekday - 1 135 | , index = 1 // start index at 0 or 1, your choice 136 | , weeksInMonth = index + Math.ceil((lastDateOfMonth + firstWeekday - 7) / 7) 137 | , week = index + Math.floor(offsetDate / 7) 138 | ; 139 | if (exact || week < 2 + index) return week; 140 | return week === weeksInMonth ? index + 5 : week; 141 | }; 142 | 143 | function diasNoMes(mes, ano) { 144 | var data = new Date(ano, mes, 0); 145 | return data.getDate(); 146 | } 147 | 148 | useEffect(() => { 149 | getEvents() 150 | }, []) 151 | 152 | const getEvents = () => { 153 | 154 | setLoading(true) 155 | let temp = { 156 | '1': { 157 | events: [] 158 | }, 159 | '2': { 160 | events: [] 161 | }, 162 | '3': { 163 | events: [] 164 | }, 165 | '4': { 166 | events: [] 167 | }, 168 | '5': { 169 | events: [] 170 | }, 171 | '6': { 172 | events: [] 173 | } 174 | }; 175 | let date = new Date(month); 176 | let rm = 0; 177 | date.setDate(1); 178 | [1, 2, 3, 4, 5, 6, 7].map((item, index) => { 179 | if (date.getDay() > (index)) { 180 | rm = rm + 1 181 | } 182 | }) 183 | setRmDays(rm); 184 | date.setDate(diasNoMes(date.getMonth() + 1, (date.getFullYear()))) 185 | 186 | getCountWeek(date.getWeekOfMonth(true)); 187 | 188 | eventsMonth.map(item => { 189 | if (item.date.getMonth() === month.getMonth()) 190 | temp = { 191 | ...temp, [(new Date(item.date)).getWeekOfMonth(true)]: { 192 | events: [...temp[(new Date(item.date)).getWeekOfMonth(true)].events, item] 193 | } 194 | } 195 | }) 196 | setEvents(temp) 197 | setTimeout(() => { 198 | setLoading(false) 199 | }, 1); 200 | 201 | 202 | } 203 | 204 | const getCountWeek = (count) => { 205 | let array = []; 206 | for (let index = 0; index < count; index++) { 207 | array.push(index + 1); 208 | } 209 | setWeekCount(array); 210 | } 211 | 212 | useEffect(() => { 213 | getEvents() 214 | }, [month]) 215 | 216 | // useEffect(() => { 217 | // if (loading) { 218 | // setLoading(false) 219 | // } 220 | // }, [events]) 221 | 222 | 223 | 224 | return ( 225 |
230 |
{ 237 | onChangeMonth(date) 238 | setMonth(date) 239 | }} 240 | /> 241 | 242 | {!loading ? 243 |
244 | {weekCount.map((item, index) => { 245 | return ( 246 | { 250 | setSelectDateChange(a) 251 | onClickDay(a) 252 | }} 253 | onEventMore={(a, b) => onEventMore(a, b)} 254 | weekCount={weekCount.length} 255 | clickEvent={(a) => onClickEvent(a)} 256 | month={month} 257 | rmDays={rmDays} 258 | item={item} 259 | data={events[item]} 260 | index={index} 261 | onClickFooter={onClickFooter} 262 | /> 263 | ) 264 | })} 265 |
266 | : 267 | 268 | } 269 |
270 | 271 | ) 272 | } 273 | 274 | BigCalendar.defaultProps = { 275 | eventsMonth: [], 276 | small: false, 277 | onChangeMonth: () => { }, 278 | selectDate: new Date(), 279 | onClickDay: () => { }, 280 | onEventMore: () => { }, 281 | onClickEvent: () => { }, 282 | onClickFooter: () => { 283 | return ( 284 | { 285 | date: "2021-07-18T20:48:54.270Z", 286 | backgroundColor: "#e8f4f8", 287 | borderColor: "#399bbc", 288 | footerView: true, 289 | footerTitle: "Ver mais", 290 | eventsDay: [ 291 | { 292 | title: "Jobs hoje", 293 | dotColor: "#000" 294 | }, 295 | { 296 | title: "Jobs hoje", 297 | dotColor: "#000" 298 | } 299 | ] 300 | } 301 | ) 302 | }, 303 | }; 304 | 305 | BigCalendar.propTypes = { 306 | eventsMonth: PropTypes.array, 307 | small: PropTypes.bool, 308 | onChangeMonth: PropTypes.func, 309 | selectDate: PropTypes.instanceOf(Date), 310 | onClickDay: PropTypes.func, 311 | onEventMore: PropTypes.func, 312 | onClickEvent: PropTypes.func, 313 | onClickFooter: PropTypes.func, 314 | rightIcon: PropTypes.element, 315 | leftIcon: PropTypes.element, 316 | }; 317 | 318 | // export default BigCalendar; -------------------------------------------------------------------------------- /src/components/bigCalendar/day/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import ChevronRightIcon from '@material-ui/icons/ChevronRight'; 3 | import { ThemeProvider, useTheme, createTheme } from '@material-ui/core/styles'; 4 | import useMediaQuery from '@material-ui/core/useMediaQuery'; 5 | 6 | function useWidth() { 7 | const theme = useTheme(); 8 | const keys = [...theme.breakpoints.keys].reverse(); 9 | return ( 10 | keys.reduce((output, key) => { 11 | // eslint-disable-next-line react-hooks/rules-of-hooks 12 | const matches = useMediaQuery(theme.breakpoints.up(key)); 13 | return !output && matches ? key : output; 14 | }, null) || 'xs' 15 | ); 16 | } 17 | 18 | const Day = ({ DayEvent, index, indexWeek, rmDays, clickEvent, onClickDay, onEventMore, month, small, selectDay, onClickFooter }) => { 19 | 20 | const width = useWidth(); 21 | const [colors, setColors] = useState({ 22 | border: "#fff", 23 | background: "#fff", 24 | }) 25 | 26 | const [eventsDay, setEventsDay] = useState([]) 27 | 28 | useEffect(() => { 29 | if (!!DayEvent.item) { 30 | let status = { 31 | border: "#fff", 32 | background: "#fff", 33 | }; 34 | if (DayEvent.item.eventsDay) { 35 | status = { 36 | border: DayEvent.item.borderColor, 37 | background: DayEvent.item.backgroundColor, 38 | }; 39 | } else { 40 | status = { 41 | border: "#fff", 42 | background: "#fff", 43 | }; 44 | } 45 | 46 | setEventsDay(DayEvent.item.eventsDay) 47 | setColors(status) 48 | } 49 | 50 | 51 | }, []) 52 | 53 | const listRender = () => { 54 | let len = 0 55 | return ( 56 | <> 57 | { 58 | eventsDay.map(item => { 59 | return ( 60 |
{ 62 | clickEvent(item) 63 | }} 64 | style={{ 65 | display: "flex", 66 | flexDirection: 'row', 67 | justifyContent: 'flex-start', 68 | alignItems: 'flex-start', 69 | }}> 70 |
79 | {item.title} 86 | 87 |
88 | ) 89 | 90 | }) 91 | } 92 | ) 93 | } 94 | 95 | 96 | return ( 97 | <>{small ? 98 |
{ 100 | if (!DayEvent.noView) { 101 | let item = new Date(month) 102 | item.setDate((((7) * (indexWeek) + index + 1) - rmDays)) 103 | onClickDay({ 104 | date: item, 105 | events: DayEvent.item 106 | }) 107 | } 108 | 109 | }} 110 | style={!DayEvent.noView ? { 111 | height: 30, 112 | width: '100%', 113 | margin: '4px', 114 | // boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.1)', 115 | borderRadius: '50%', 116 | // borderLeft: `3px solid ${colors.border}`, 117 | // backgroundColor: colors.background, 118 | cursor: 'pointer', 119 | overflow: 'hidden', 120 | display: 'flex', 121 | flexDirection: 'column', 122 | justifyContent: 'center', 123 | alignItems: 'center' 124 | 125 | } : { 126 | height: 30, 127 | width: '100%', 128 | margin: '4px 4px', 129 | }} 130 | > 131 | {/* {selectDay === (((7) * (indexWeek) + index + 1) - rmDays) ? 132 | 133 |
140 |

141 | {!DayEvent.noView && (((7) * (indexWeek) + index + 1) - rmDays)} 142 |

143 |
144 |
145 | : */} 146 |
162 |

163 | {!DayEvent.noView && (((7) * (indexWeek) + index + 1) - rmDays)} 164 |

165 |
166 |
167 | {/* } */} 168 |
169 | : 170 | 171 |
{ 173 | if (!DayEvent.noView) { 174 | let item = new Date(month) 175 | item.setDate((((7) * (indexWeek) + index + 1) - rmDays)) 176 | onClickDay({ 177 | date: item, 178 | events: DayEvent.item 179 | }) 180 | } 181 | 182 | }} 183 | style={!DayEvent.noView ? { 184 | height: 120, 185 | width: '100%', 186 | margin: '8px 4px', 187 | boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.1)', 188 | borderRadius: '5px 3px 5px 5px', 189 | borderLeft: `3px solid ${colors.border}`, 190 | backgroundColor: colors.background, 191 | cursor: 'pointer', 192 | overflow: 'hidden', 193 | display: 'flex', 194 | flexDirection: 'column', 195 | justifyContent: 'space-between' 196 | 197 | } : { 198 | height: 120, 199 | width: '100%', 200 | margin: '8px 4px', 201 | }} 202 | > 203 | 204 |
205 | {!DayEvent.noView && (((7) * (indexWeek) + index + 1) - rmDays)} 206 |
207 |
217 | {!!DayEvent.item && ( 218 | <> 219 | {listRender()} 220 | 221 | )} 222 |
223 | 224 | {(!DayEvent.noView && !!DayEvent.item && DayEvent.item.footerView) && 225 |
onClickFooter(DayEvent.item)} 227 | style={{ display: "flex", flexDirection: 'row', justifyContent: 'space-between', padding: 5, paddingTop: 0, height: 20, alignItems: 'center', position: 'relative', }} 228 | > 229 | 230 |
231 | {/* */} 232 | {DayEvent.item.footerTitle} 240 |
241 | 242 | 243 | {DayEvent.item.footerIcon ? DayEvent.item.footerIcon : } 244 |
245 | } 246 |
} 247 | 248 | ) 249 | } 250 | 251 | export default Day; -------------------------------------------------------------------------------- /src/components/bigCalendar/header/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | format, 4 | } from 'date-fns'; 5 | import { IconButton } from '@material-ui/core'; 6 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; 7 | import ChevronRightIcon from '@material-ui/icons/ChevronRight'; 8 | 9 | const Header = (props) => { 10 | 11 | const getTime = (date) => { 12 | 13 | const formattedDate = format( 14 | date, 15 | "MMMM '-' yyyy", { locale: props.locale } 16 | ); 17 | return formattedDate; 18 | 19 | 20 | } 21 | 22 | const changeMonth = (direction) => { 23 | let item; 24 | if (direction === 'left') { 25 | item = new Date(props.month); 26 | item.setMonth(item.getMonth() - 1); 27 | } else { 28 | item = new Date(props.month); 29 | item.setMonth(item.getMonth() + 1); 30 | } 31 | props.onChange(item); 32 | } 33 | 34 | return ( 35 |
36 | changeMonth('left')} aria-label="delete" size="small"> 37 | {props.leftIcon ? props.leftIcon : } 38 | 39 |
40 |

{getTime(new Date(props.month))}

41 |
42 | changeMonth('right')} aria-label="delete" size="small"> 43 | {props.rightIcon ? props.rightIcon : } 44 | 45 |
46 | ) 47 | } 48 | 49 | export default Header; -------------------------------------------------------------------------------- /src/components/bigCalendar/index.js: -------------------------------------------------------------------------------- 1 | export * from './BigCalendar'; -------------------------------------------------------------------------------- /src/components/bigCalendar/week/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import Day from '../day'; 3 | 4 | const Week = ({ index, data, month, rmDays, weekCount, small, selectDay, onEventMore, onClickDay, clickEvent, onClickFooter }) => { 5 | 6 | const [weekindex, setWeekIndex] = useState(index); 7 | const [events, setEvents] = useState([]); 8 | 9 | function diasNoMes(mes, ano) { 10 | var data = new Date(ano, mes, 0); 11 | return data.getDate(); 12 | } 13 | useEffect(() => { 14 | if (!!data.events) { 15 | let array = []; 16 | [1, 2, 3, 4, 5, 6, 7].map(item => { 17 | array.push({}) 18 | }) 19 | 20 | let date = new Date(month); 21 | date.setDate(1); 22 | // if (date.getMonth() === month.getMonth()) 23 | if (weekindex === 0) { 24 | [1, 2, 3, 4, 5, 6, 7].map((item, index) => { 25 | if (date.getDay() > (index)) { 26 | 27 | array[index] = { 28 | noView: true, 29 | } 30 | } 31 | }) 32 | } 33 | 34 | date.setDate(diasNoMes(date.getMonth() + 1, (date.getFullYear()))) 35 | // if (date.getMonth() === month.getMonth()) 36 | if (weekindex === (weekCount - 1)) { 37 | [1, 2, 3, 4, 5, 6, 7].map((item, index) => { 38 | if (date.getDay() < (index)) 39 | 40 | array[index] = { 41 | noView: true, 42 | 43 | } 44 | }) 45 | } 46 | 47 | data.events.map((item, index) => { 48 | array[new Date(item.date).getDay()] = { item } 49 | }) 50 | setEvents(array) 51 | } 52 | 53 | }, [data, weekCount]) 54 | 55 | return ( 56 |
57 | {events.map((item, index) => { 58 | 59 | return ( 60 | onEventMore(a, b)} 66 | onClickDay={(a) => onClickDay(a)} 67 | clickEvent={(a) => clickEvent(a)} 68 | rmDays={rmDays} 69 | indexWeek={weekindex} 70 | index={index} 71 | onClickFooter={onClickFooter} 72 | /> 73 | ) 74 | }) 75 | } 76 |
77 | ) 78 | } 79 | 80 | export default Week; -------------------------------------------------------------------------------- /src/components/bigCalendar/weekNames/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | format, 4 | } from 'date-fns'; 5 | import pt from 'date-fns/locale/pt-BR'; 6 | const names = [ 7 | '2021-07-25', 8 | '2021-07-26', 9 | '2021-07-27', 10 | '2021-07-28', 11 | '2021-07-29', 12 | '2021-07-30', 13 | '2021-07-31', 14 | ] 15 | 16 | const WeekNames = ({ small, locale = pt }) => { 17 | 18 | const getWeekName = (date) => { 19 | 20 | 21 | const formattedDate = format( 22 | new Date(date.split("-")[0], date.split("-")[1] - 1, date.split("-")[2]), 23 | small ? "EEEEE" : "EEEE", { locale } 24 | ); 25 | return formattedDate; 26 | 27 | 28 | } 29 | 30 | return ( 31 |
32 | 33 | 34 | {names.map(item => { 35 | return ( 36 |
37 | {getWeekName(item)} 38 |
39 | ) 40 | })} 41 |
42 | ) 43 | 44 | } 45 | 46 | export default WeekNames; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export * from "./components/bigCalendar"; 2 | -------------------------------------------------------------------------------- /src/stories/BigCalendar.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from "@storybook/react"; 3 | 4 | import { BigCalendar } from "../components/bigCalendar"; 5 | const stories = storiesOf("App Test", module); 6 | 7 | stories.add("App", () => { 8 | 9 | return ( 10 | { 12 | console.log(item) 13 | }} 14 | onClickDay={(item) => { 15 | console.log(item) 16 | }} 17 | onChangeMonth={(item) => { 18 | console.log(item) 19 | }} 20 | onClickFooter={(item) => { 21 | console.log(item) 22 | }} 23 | eventsMonth={ 24 | [ 25 | { 26 | date: new Date(), 27 | backgroundColor: "#f0fded", 28 | borderColor: "green", 29 | footerView: true, 30 | // footerIcon: "<>", 31 | footerTitle: `Ver mais`, 32 | eventsDay: [ 33 | { 34 | title: "Ajudante de cozinha", 35 | dotColor: "#000", 36 | }, 37 | { 38 | title: "Cozinheiro", 39 | dotColor: "#000", 40 | }, 41 | 42 | ] 43 | }, 44 | 45 | { 46 | date: new Date(2021, 6, 5), 47 | backgroundColor: "#e8f4f8", 48 | borderColor: "#399bbc", 49 | footerView: true, 50 | footerTitle: "Ver mais", 51 | eventsDay: [ 52 | { 53 | title: "Atendente", 54 | dotColor: "#000" 55 | }, 56 | { 57 | title: "Moto boy", 58 | dotColor: "#000" 59 | } 60 | ] 61 | }, 62 | { 63 | date: new Date(2021, 6, 30), 64 | backgroundColor: "#e8f4f8", 65 | borderColor: "#399bbc", 66 | footerView: true, 67 | footerTitle: "Ver mais", 68 | eventsDay: [ 69 | { 70 | title: "Dentista", 71 | dotColor: "#000" 72 | }, 73 | { 74 | title: "Farra", 75 | dotColor: "#000" 76 | } 77 | ] 78 | }, 79 | { 80 | date: new Date(2021, 6, 28), 81 | backgroundColor: "#FF7F7F50", 82 | borderColor: "red", 83 | footerView: true, 84 | footerTitle: "Ver mais", 85 | eventsDay: [ 86 | { 87 | title: "Tomar uma", 88 | dotColor: "#000" 89 | }, 90 | { 91 | title: "Ressaca", 92 | dotColor: "#000" 93 | } 94 | ] 95 | }, 96 | ]} 97 | /> 98 | ) 99 | }) --------------------------------------------------------------------------------