Creando Calendarios en React

By malcode

Empecemos‚Ķūü§ě

Instalar react-big-calendar a través de npm:

npm i --save react-big-calendar

o de Yarn:

yarn add react-big-calendar

Los estilos se pueden encontrar en: react-big-calendar/lib/css/react-big-calendar.css y deben incluirse en la p√°gina con el componente de calendario. La internacionalizaci√≥n y localizaci√≥n de la fecha es dif√≠cil y react-big-calendar ni siquiera intenta resolver ese problema. En su lugar, puede utilizar una de las muchas soluciones excelentes que ya existen, a trav√©s de adaptadores llamados ‚Äúlocalizadores‚ÄĚ. Big Calendar incluye dos localizadores para usar con globalize.js o Moment.js. Elija el localizador que mejor se adapte a sus necesidades, o escriba el suyo. Hagas lo que hagas, deber√°s configurarlo antes de poder usar el calendario (solo necesitas configurarlo una vez).

Paso UNO

Importa bigcalendar y uno de los Localizadores, moment.js o globalize.js.


import React, { Component } from "react"
import BigCalendar from "react-big-calendar"
import moment from "moment"

Paso DOS

Configura el localizador Necesita cargar el archivo de configuraci√≥n regional que necesita. Por ejemplo, para nuestra aplicaci√≥n (admitimos espa√Īo => es) hago:


require("moment/locale/es.js")
const localizer = BigCalendar.momentLocalizer(moment)

Puedes incluir m√ļltiples idiomas, solo debes requerir el archivo .js de idiomas seg√ļn tu necesidad.

Ejemplo (es,en, nl, fr,cs). M√°s en moment.js


require("moment/locale/es.js")
require("moment/locale/cs.js")
require("moment/locale/fr.js")
require("moment/locale/nl.js")

Paso TRES

Creamos un un array de objetos, con nuestros eventos.


const myEventsList = [
  {
    title: "today",
    start: new Date("2019-05-05 10:22:00"),
    end: new Date("2019-05-05 10:42:00"),
  },
  {
    title: "string",
    start: new Date("2019-05-05 12:22:00"),
    end: new Date("2019-05-05 13:42:00"),
  },
]

Paso CUATRO

Agrega el componente BigCalendar, Aseg√ļrate de que el contenedor de tu componente tenga una altura definida. style={{height:${400}px}} o lo puedes hacer en un archivo .css externo agreg√°ndole una clase al contenedor.


class EventsCalendar extends Component {
  render() {
    return (
      <div style={{ height: '400px' }} className="bigCalendar-container">
        <BigCalendar
          localizer={localizer}
          events={myEventsList}
          startAccessor="start"
          endAccessor="end"
        />
      </div>
    )
  }
}

Con esto ya tienes react-big-calendar integrado en tu app con el calendario en espa√Īol m√°s no los controles del calendario. Pues bien trabajemos en eso.

bigcalendar

Paso CINCO

No hay mucho que hacer, en el componente BigCalendar agregamos la propiedad messages:


    class EventsCalendar extends Component {
      render() {
        return (
          <div style={{ height: '400px' }} className="bigCalendar-container">
            <BigCalendar
              localizer={localizer}
              events={myEventsList}
              startAccessor="start"
              endAccessor="end"
              messages={{
                next: "sig",
                previous: "ant",
                today: "Hoy",
                month: "Mes",
                week: "Semana",
                day: "Día",
              }}
            />
          </div>
        )
      }
    }
  

Es todo, ya tenemos los controles en nuestro idioma.

BigCalendar

Nuestro código final queda de la siguiente manera.


import React, { Component } from "react"
import BigCalendar from "react-big-calendar"
import moment from "moment"
require("moment/locale/es.js")

const localizer = BigCalendar.momentLocalizer(moment)
const myEventsList = [
  {
    title: "today",
    start: new Date("2019-05-05 10:22:00"),
    end: new Date("2019-05-05 10:42:00"),
  },
  {
    title: "string",
    start: new Date("2019-05-05 12:22:00"),
    end: new Date("2019-05-05 13:42:00"),
  },
]
class EventsCalendar extends Component {
  render() {
    return (
      <div style={{ height: '400px' }} className="bigCalendar-container">
        <BigCalendar
          localizer={localizer}
          events={myEventsList}
          startAccessor="start"
          endAccessor="end"
          messages={{
            next: "sig",
            previous: "ant",
            today: "Hoy",
            month: "Mes",
            week: "Semana",
            day: "Día",
          }}
        />
      </div>
    )
  }
}