1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[ReactJS]

Discussão em 'Mobile' iniciado por Stack, Abril 23, 2021.

  1. Stack

    Stack Membro Participativo

    Estou criando um calendário no react pra fazer uma espécie de agenda de grupo. Criei um modal para adicionar eventos dentro de cada data do calendário, mas toda vez que digito o valor no modal, todas as datas ficam com o mesmo texto.

    abaixo o código de useCalendar.js

    import { useState } from 'react';

    const daysShortArr = [
    'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab', 'Dom'
    ];

    const monthNamesArr = [
    'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro',
    ];

    const useCalendar = (daysShort = daysShortArr, monthNames = monthNamesArr) => {
    const today = new Date();
    const todayFormatted = `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()}`;
    const daysInWeek = [1, 2, 3, 4, 5, 6, 0];
    const [selectedDate, setSelectedDate] = useState(today);
    const selectedMonthLastDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
    const prevMonthLastDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 0);
    const daysInMonth = selectedMonthLastDate.getDate();
    const firstDayInMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1).getDay();
    const startingPoint = daysInWeek.indexOf(firstDayInMonth) + 1;
    let prevMonthStartingPoint = prevMonthLastDate.getDate() - daysInWeek.indexOf(firstDayInMonth) + 1;
    let currentMonthCounter = 1;
    let nextMonthCounter = 1;
    const rows = 6;
    const cols = 7;
    const calendarRows = {};

    for (let i = 1; i < rows + 1; i++) {
    for (let j = 1; j < cols + 1; j++) {
    if (!calendarRows) {
    calendarRows = [];
    }

    if (i === 1) {
    if (j < startingPoint) {
    calendarRows = [...calendarRows, {
    classes: 'in-prev-month',
    date: `${prevMonthStartingPoint}-${selectedDate.getMonth() === 0 ? 12 : selectedDate.getMonth()}-${selectedDate.getMonth() === 0 ? selectedDate.getFullYear() - 1 : selectedDate.getFullYear()}`,
    value: prevMonthStartingPoint
    }];
    prevMonthStartingPoint++;
    } else {
    calendarRows = [...calendarRows, {
    classes: '',
    date: `${currentMonthCounter}-${selectedDate.getMonth() + 1}-${selectedDate.getFullYear()}`,
    value: currentMonthCounter
    }];
    currentMonthCounter++;
    }
    } else if (i > 1 && currentMonthCounter < daysInMonth + 1) {
    calendarRows = [...calendarRows, {
    classes: '',
    date: `${currentMonthCounter}-${selectedDate.getMonth() + 1}-${selectedDate.getFullYear()}`,
    value: currentMonthCounter
    }];
    currentMonthCounter++;
    } else {
    calendarRows = [...calendarRows, {
    classes: 'in-next-month',
    date: `${nextMonthCounter}-${selectedDate.getMonth() + 2 === 13 ? 1 : selectedDate.getMonth() + 2}-${selectedDate.getMonth() + 2 === 13 ? selectedDate.getFullYear() + 1 : selectedDate.getFullYear()}`,
    value: nextMonthCounter
    }];
    nextMonthCounter++;
    }
    }
    }

    const getPrevMonth = () => {
    setSelectedDate(prevValue => new Date(prevValue.getFullYear(), prevValue.getMonth() - 1, 1));
    }

    const getNextMonth = () => {
    setSelectedDate(prevValue => new Date(prevValue.getFullYear(), prevValue.getMonth() + 1, 1));
    }

    return {
    daysShort,
    monthNames,
    todayFormatted,
    calendarRows,
    selectedDate,
    getPrevMonth,
    getNextMonth
    }
    }

    export default useCalendar;


    abaixo código de Calendar.js


    import React, { useState, Fragment } from 'react';
    //import axios from 'axios';
    import useCalendar from '../hooks/useCalendar';
    import Modal from '../components/Modal';
    import BoxModal from '../components/BoxModal';

    const Calendar = () => {
    const { calendarRows, selectedDate, todayFormatted, daysShort, monthNames, getNextMonth, getPrevMonth } = useCalendar();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isBoxModalVisible, setIsBoxModalVisible] = useState(false);
    const [title, setTitle] = useState("");

    const dateClickHandler = date => {
    console.log({ date });
    }

    const inputTitle = (e) => {
    e.preventDefault();

    setTitle(e.target.value);
    }

    /*const onDataBinding = () => {
    axios.get('https://www.googleapis.com/calendar/v3/calendars/2fk3cc4a5av0uben2udghr7d44@group.calendar.google.com/events?key=AIzaSyAIMySPMI0egGep6HFVrIV6DleD-dGr780')
    .then(function (response) {

    console.log(response);
    })
    .catch(function (error) {
    // handle error
    console.log(error);
    })
    }*/

    return (
    <Fragment>
    <div>{isBoxModalVisible ?
    <BoxModal onClose={() => setIsBoxModalVisible(false)}>
    <div className="bg">
    <button className="pencil" onClose={() => setIsModalVisible(false)} onClick={() => setIsModalVisible(true)}>&#128393;</button ><br />
    <p className="boxTitle">{title}</p>
    </div>
    <div className="info">

    </div>

    </BoxModal>
    : null}</div>

    <div>{isModalVisible ?
    <Modal onClose={() => setIsModalVisible(false)}>
    <form action="" className="eventForm">
    <h2>Edit Event</h2>
    <span>title</span><br />
    <input type="text" onChange={inputTitle} value={title} /><br /><br />
    <div className="start">
    <span>Start :</span><br />
    <input type="date" /><input type="time" />
    </div>
    <div className="end">
    <span>End : </span><br />
    <input type="date" /><input type="time" />
    </div><br />


    <input type="checkbox" /><span>all day</span><br /><br />
    <span>Repeat</span><br />
    <select className="select" name="" id="">
    <option value="">Never</option>
    <option value="">Dayly</option>
    <option value="">Weekly</option>
    <option value="">Monthly</option>
    <option value="">Yearly</option>
    </select><br /><br />
    <span className="desc">Description</span><br />
    <textarea className="textArea" name="" id="" cols="60" rows="5"></textarea><br /><br />
    <button className="buttonModal" >Save</button>
    <button className="buttonModal">Cancel</button>
    </form>

    </Modal>
    : null}</div>
    <div className="calendar">

    <div className="month">
    <button className="buttons " onClick={getPrevMonth}>&lsaquo;</button>
    <h1 >{`${monthNames[selectedDate.getMonth()]} - ${selectedDate.getFullYear()}`}</h1>
    <button className="buttons " onClick={getNextMonth}>&rsaquo;</button>
    </div>

    <table cellspacing="0" className="table">
    <thead>
    <tr className="dayWeek">
    {daysShort.map(day => (
    <th key={day}>{day}</th>
    ))}
    </tr>
    </thead>
    <tbody>
    {
    Object.values(calendarRows).map(cols => {
    return <tr className="dayMonth" key={cols[0].date}>
    {cols.map(col => (
    col.date === todayFormatted
    ? <td key={col.date} className={`${col.classes} `} onClick={() => dateClickHandler(col.value)}>
    <div id="calendarDays" onClick={() => setIsBoxModalVisible(true)} className="day today">
    <div id={`${col.value}`} >
    {col.value}<br />
    </div>
    </div>
    </td>
    : <td key={col.date} className={`${col.classes}`} onClick={() => dateClickHandler(col.value)}>
    <div id="calendarDays" onClick={() => setIsBoxModalVisible(true)} className="day">
    {col.value}
    <div id={`${col.value}`} className={col.value}>
    {title}
    </div>
    </div>
    </td>
    ))}
    </tr>
    })
    }
    </tbody>
    </table>
    </div>
    </Fragment>
    );
    }

    export default Calendar;

    Continue reading...

Compartilhe esta Página