I am trying to make a calendar with task using ReactJS and data (json) from my server. Nowadays I made something like this. I hope you will find these tips helpful.
I can't find any module to make it without coding... Do you know any?
Calendar.js
import React from 'react';
import ConfigX from '../ConfigX';
class Calendar extends React.Component
{
lang = 'en';
constructor(props)
{
super(props)
var dd = new Date();
if(this.props.y && this.props.m )
{
dd = new Date( this.props.y + "-" + this.props.m + "-01 00:00:00" );
}
var y = dd.getFullYear();
var m = dd.getMonth()+1;
var d = dd.getDate();
var t = dd.getDay();
var last = new Date(y, m, 0).getDate();
console.log( y+ "-" + m + '-' + d + ' d ' + t + "all " + last);
var calDays = new Array();
for(var k=0; k<t; k++)
{
calDays.push(".");
}
for(var k=1; k<=last; k++)
{
calDays.push(k);
}
var years = new Array();
for(var k=y-10; k<=y+10; k++)
{
years.push(k);
}
var months = new Array()
months[1] = 'Styczeń';
months[2] = 'Luty';
months[3] = 'Marzec';
months[4] = 'Kwiecień';
months[5] = 'Maj';
months[6] = 'Czerwiec';
months[7] = 'Lipiec';
months[8] = 'Sierpień';
months[9] = 'Wrzesień';
months[10] = 'Październik';
months[11] = 'Listopad';
months[12] = 'Grudzień';
if(this.lang == "en")
{
months[1] = 'January';
months[2] = 'February';
months[3] = 'March';
months[4] = 'April';
months[5] = 'May';
months[6] = 'June';
months[7] = 'July';
months[8] = 'August';
months[9] = 'September';
months[10] = 'October';
months[11] = 'November';
months[12] = 'December';
}
var daysOfWeek = new Array();
daysOfWeek[0] = 'PN';
daysOfWeek[1] = 'WT';
daysOfWeek[2] = 'ŚR';
daysOfWeek[3] = 'CZ';
daysOfWeek[4] = 'PT';
daysOfWeek[5] = 'SB';
daysOfWeek[6] = 'ND';
if(this.lang == 'en')
{
daysOfWeek[0] = 'Monday';
daysOfWeek[1] = 'Tuesday';
daysOfWeek[2] = 'Wednesday';
daysOfWeek[3] = 'Thursday';
daysOfWeek[4] = 'Friday';
daysOfWeek[5] = 'Saturday';
daysOfWeek[6] = 'Sunday';
}
this.state = {
year: y,
month: m,
days: calDays,
rows: [],
view: "month", //week / days
years: years,
months: months,
daysOfWeek: daysOfWeek
}
}
getData()
{
/**
* Example response from server
[
{
"day": "2",
"month": "12",
"year": "2022",
"h": [
{
"timeStart": "18:48",
"timeStop": "18:48",
"title": "Training....",
"subtitle": "Lesson 1",
"typ": "sk_szkolenia_terminy",
"typ_id": "109"
}
]
}
]
*/
var dataPost = {};
fetch( ConfigX.restApi + "/dash,cal" , {
method: 'POST',
body: JSON.stringify(dataPost),
headers: {
'Content-Type': 'text/html',
'X-API-KEY': this.props.apiKey
}
})
.then( res => res.json() )
.then(json => {
this.setState({
rows: json,
});
});
}
componentDidMount()
{
this.getData();
}
onChangeMonth(event)
{
var v = event.target.value;
this.setState({
month: v
});
}
onChangeYear(event)
{
var v = event.target.value;
this.setState({
year: v
});
}
onClickTask(event)
{
var day = event.target.getAttribute("day");
var h = event.target.getAttribute("h");
console.log("Click on " + this.state.year+"-"+this.state.month+"-"+day + " " + h);
}
render()
{
return (
<div className='compCalendar'>
<div className='compControll'>
<div className='filter_content'>
<select defaultValue={this.state.year} onChange={this.onChangeYear.bind(this) } >
{
this.state.years.map( item => {
return (
<option value={item}>
{item}
</option>
)
})
}
</select>
<select defaultValue={this.state.month} onChange={this.onChangeMonth.bind(this) } >
{
this.state.months.map( (index,item) => {
return (
<option value={item}>
{index}
</option>
)
})
}
</select>
</div>
</div>
<div className='cellWidth cellBold'>{this.state.daysOfWeek[0]}</div>
<div className='cellWidth cellBold'>{this.state.daysOfWeek[1]}</div>
<div className='cellWidth cellBold'>{this.state.daysOfWeek[2]}</div>
<div className='cellWidth cellBold'>{this.state.daysOfWeek[3]}</div>
<div className='cellWidth cellBold'>{this.state.daysOfWeek[4]}</div>
<div className='cellWidth cellBold'>{this.state.daysOfWeek[5]}</div>
<div className='cellWidth cellBold'>{this.state.daysOfWeek[6]}</div>
{
this.state.days.map(item => {
var task = [];
for(var kk=0; kk<this.state.rows.length; kk++)
{
if( parseInt(this.state.rows[kk].year) == parseInt(this.state.year) && parseInt(this.state.rows[kk].month) == parseInt(this.state.month) && parseInt(this.state.rows[kk].day) == parseInt(item) )
{
task = this.state.rows[kk].h;
}
}
return (
<div className='cellWidth celHeightN'>
<div className='dayNum'>{item}</div>
<div className='dayContent'>{
task.map( h=>{
var title = h.title;
if(title.length > 20) {
title = title.substring(0,20) + "...";
}
return (
<div className='task' day={item} h={h.timeStart} onClick={this.onClickTask.bind(this) }>
<span className='hour'>{h.timeStart}</span>
{title}
</div>
)
})
}</div>
</div>
)
})
}
</div>
)
}
}
export default Calendar
You can put this component like this:
Before use this let's prepare backend and return data like this below:
[
{
"day": "2",
"month": "12",
"year": "2022",
"h": [
{
"timeStart": "18:48",
"timeStop": "18:48",
"title": "Training....",
"subtitle": "Lesson 1",
"typ": "sk_szkolenia_terminy",
"typ_id": "109"
}
]
}
]