You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I want to create custom ui design for events in the month view of react-big-calender. I tried using "dateHeader" . but it is only able to change the header part of the day component. but I want to change the event listing in month view to the design I mentioned in the above attachment. I was able to change the design of weekView check the below code.
`import React from 'react'
import * as dates from 'date-arithmetic'
import moment from 'moment';
import { Calendar, Views, Navigate } from 'react-big-calendar'
import TimeGrid from 'react-big-calendar/lib/TimeGrid'
import {CustomWeekView} from "./custom-week-view"
class MyWeek extends React.Component {
render() {
const today = new Date();
let { date } = this.props
let range = MyWeek.range(date)
return <CustomWeekView range={range} {...this.props}></CustomWeekView>
}
}
MyWeek.range = date => {
let start = moment(date).startOf('week').toDate()
let end = moment(date).endOf('week').toDate()
let current = start
let range = []
while (dates.lte(current, end, 'day')) {
range.push(current)
current = dates.add(current, 1, 'day')
}
return range
}
MyWeek.navigate = (date, action) => {
switch (action) {
case Navigate.PREVIOUS:
return dates.add(date, -1, 'week')
case Navigate.NEXT:
return dates.add(date,1, 'week')
default:
return date
}
}
MyWeek.title = date => {
return ` ${date.toLocaleDateString()}`
}
export default MyWeek;`
this it the output
But for month i have tried with the same logic. but the month view is not looking correctly. i want to use the same structure of the current default month view . but with some modification on how the events are shown. currently its shown as a iist. but i want to show events by icons grouped with number
The text was updated successfully, but these errors were encountered:
I want to create custom ui design for events in the month view of react-big-calender. I tried using "dateHeader" . but it is only able to change the header part of the day component. but I want to change the event listing in month view to the design I mentioned in the above attachment. I was able to change the design of weekView check the below code.
this it the output
But for month i have tried with the same logic. but the month view is not looking correctly. i want to use the same structure of the current default month view . but with some modification on how the events are shown. currently its shown as a iist. but i want to show events by icons grouped with number
The text was updated successfully, but these errors were encountered: