Im trying to use the react-big-calendar package. http://intljusticemission.github.io/react-big-calendar/examples/index.html
I have the calendar displaying on the page. The pagination is working and I have no errors in my console. However none of my events are showing. Do I have a syntax / format error somewhere?
import React from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
BigCalendar.momentLocalizer(moment); // or globalizeLocalizer
const Calendar = props => {
const dummyEvents = [
{
allDay: false,
end: new Date('December 10, 2017 11:13:00'),
start: new Date('December 09, 2017 11:13:00'),
title: 'hi',
},
{
allDay: true,
end: new Date('December 09, 2017 11:13:00'),
start: new Date('December 09, 2017 11:13:00'),
title: 'All Day Event',
},
];
return (
<div>
<BigCalendar
events={dummyEvents}
startAccessor="startDate"
endAccessor="endDate"
/>
</div>
)
}
Must add height for calendar container element.
If you do not add height for calendar container, calendar won't be visible.
Must read the doc for react-big-calendar: https://github.com/intljusticemission/react-big-calendar
.rbc-calendar {
min-height: 500px ;
}
<div className="rbc-calendar">
<BigCalendar
events={dummyEvents}
startAccessor="startDate"
endAccessor="endDate"
/>
</div>
You need to set a height or min height on the calendar:
.rbc-calendar {
min-height: 600px;
}
const dummyEvents = [
{
allDay: false,
end: new Date('December 09, 2017 20:00:00'),
start: new Date('December 09, 2017 06:00:00'),
title: 'hi',
}
]
When you create the BigCalendar component you specify
startAccessor="startDate"
endAccessor="endDate"
This tells BigCalendar to look for startDate= and endDate= instead of start= and end= in your event objects. Change your event array to this and it should work fine:
const dummyEvents = [
{
allDay: false,
endDate: new Date('December 10, 2017 11:13:00'),
startDate: new Date('December 09, 2017 11:13:00'),
title: 'hi',
},
{
allDay: true,
endDate: new Date('December 09, 2017 11:13:00'),
startDate: new Date('December 09, 2017 11:13:00'),
title: 'All Day Event',
},
];
You've set start and end key in dummydata but you're accessing startDate and endDate.
<BigCalendar
events={dummyEvents}
startAccessor='start'
endAccessor='end' />
Related
Tabulator does not accept header color change
Through the css below, I'm trying to change the header color of all my columns, but I'm not getting this adjustment
tried to do it this way but it's not going.
I use vue3 + vite + tabulator 5.4
<style scoped>
.tabulator {
font-size: 12px;
width: 100%;
}
.tabulator .tabulator-header,
.tabulator-col .headerBackgroundColor {
background-color: #acacac;
}
</style>
this is my tabulator
tabulator.value = new Tabulator('#tabulator', {
data: dataRelatorio.value,
layout: 'fitColumns',
autoResize: true,
pagination: 'local',
paginationSize: 20,
rowHeight: 25,
paginationSizeSelector: [10, 20, 30, 50, 100, 200, 500, 1000],
movableColumns: true,
paginationCounter: 'rows',
responsiveLayout: 'hide',
placeholder: 'No record found',
locale: 'pt-BR',
langs: {
'pt-BR': {
pagination: {
page_title: 'Show page',
first: 'First',
first_title: 'First page',
last: 'Next',
last_title: 'Next page',
prev: 'Previous',
prev_title: 'Previous page',
next: 'Next',
next_title: 'Next Page',
all: 'All',
},
},
},
columns: columns,
rowFormatter: function (row) {
//console.log(row.getData());
if (row.getData().in_delayed === 'delayed') {
const children = row.getElement().childNodes;
children.forEach((child) => {
child.style.backgroundColor = '#FFFACD';
});
}
},
});
This should work:
<style>
.tabulator .tabulator-header .tabulator-col {
background-color: #acacac;
}
</style>
Notes:
I didn't use the scoped directive on <style> tag.
you can have more than one <style> tag in a component, some scoped and some regular. The regular ones are "normal" CSS, they apply to the entire DOM.
you can also apply the above styles inside a scoped style tag. The selector would most likely be .tabulator :deep(.tabulator-header .tabulator-col), but I can't know for sure until you provide a runnable minimal example, so I could inspect it.
Auto Play Slider is Not Working
I tried all solutions from the given stack overflow nothing works for me I am using ionic4 slide
I am trying this from last 6 days not getting the solution please let me know proper solution so that I can fix this issue
#ViewChild('sliderRef', { static:false }) slides: IonSlides;
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
loop:true,
autoplay:{disableOnInteraction:false}
}
ionViewWillEnter(){
this.sliderThree =
{
slidesItems: [
{
id: "../../assets/images/market.jpg",
name:"Sumo"
},
{
id: "../../assets/images/mobile.jpg",
name:"Shelcal 500"
},
{
id: "../../assets/images/test.jpg",
name:"Orofer Xt"
},
]
};
this.slide.update();
}
async slideChange() {
console.log("method called");
this.slides.update();
}
<ion-slides [options]="option" #sliderRef (ionSlideDidChange)="slideChange()">
<ion-slide *ngFor="let item of sliderThree.slidesItems" style="width:90%;height:20vh;" (click)="labTest()">
<ion-card style="width:90%;height:20vh;
display:-webkit-box;
overflow:hidden;border:1px solid grey;" >
<img [src]="item.id" style="width:100%;height:20vh;
display:-webkit-box;" alt="">
</ion-card>
</ion-slide>
</ion-slides>
Had an similar issue try manually starting on ionViewDidEnter and stoping it on ionViewDidEnter.
But first remove your loop, and autoplay properties from the options like so:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000
}
Then handle start and stop like this:
ionViewDidEnter(){
this.slide.startAutoplay();
}
ionViewDidLeave(){
this.slide.stopAutoplay();
}
EDIT:
If you want to make it work between tabs, then use the autoplay option like so:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
autoplay: {
delay: 1000,
disableOnInteraction: false
}
}
I am trying to use WeekCalendar from react-native-calendars package. I am able to view the WeekCalendar and scroll it. However, I want that on horizontal scroll - the currentDate should be updated to date in that current week and should be updated on the UI. How do I go about this?
I was able to find a solution for onclick but I want on scrolling the current date should be a date from that current week.
<WeekCalendar
firstDay={1}
current={selectedDateOfTheWeek}
onDayPress={(day, localDay) => {
changeSelectedDateFromCalendar(day.dateString, false);
}}
hideExtraDays={false}
pastScrollRange={24}
futureScrollRange={24}
markedDates={{
[selectedDateOfTheWeek]: {
selected: true,
selectedColor: "#8660ce"
}
}}
/>
selectedDateOfTheWeek stores the date in 'YYYY-MM-DD' format. I am using Redux to manage the state.
wrap your week calendar with <CalendarProvide and use onDateChanged event
<CalendarProvider
date={this.state.selectedDate.dateString}
onDateChanged={this.onDateChanged}
markedDates={{
...this.state.markedDates,
[this.state.selectedDate.dateString]: {
selected: true,
},
}}
>
<WeekCalendar
testID={testIDs.weekCalendar.CONTAINER}
hideDayNames={true}
firstDay={1}
dayComponent={this.renderDateWeek}
theme={calendarThemes}
calendarWidth={screenWidth}
allowShadow={false}
markedDates={{
...this.state.markedDates,
[this.state.selectedDate.dateString]: {
selected: true,
},
}}
pastScrollRange={(new Date().getFullYear() - 1900) * 12}
futureScrollRange={(2099 - new Date().getFullYear()) * 12}
style={[styles.calendar, { paddingBottom: 20, paddingLeft: 0, paddingRight: 0 }]}
onDayPress={(date) => this.changeDate(date.dateString)}
/>
</CalendarProvider>
I'm using the ng-pick-datetime picker for my application. I want the selected time to show in 24hr (15:00 instead of 3:00 pm). When the picker opens the time is displayed in the picker correctly, but once selected it changes it to 12hr time format. Is there a way to set the selected time to show in 24 hour time instead of 12 hour?
Here is a link to the picker I'm using:
ng-pick-datetime
Put hour12: false to custom format, and just working see code below:
export const MY_NATIVE_FORMATS = {
fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false},
datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour12: false},
timePickerInput: {hour: 'numeric', minute: 'numeric', hour12: false},
monthYearLabel: {year: 'numeric', month: 'short'},
dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
monthYearA11yLabel: {year: 'numeric', month: 'long'},
};
#NgModule({
providers: [
{provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS},
]
})
I know this was posted too long, but here is my solution. It's more of a hack as I found that it's not possible to change the format directly.
So I created another input field which will show the time in 24-hour format, while the original input which will have the functionality to open the time picker will not be visible.
HTML:
<div class="position-relative time-parent">
<input type="text" class="form-control original-time-field"
placeholder="Eg: 06:55 (24-Hour)"
name="timeOriginal"
[(ngModel)]="timeOrig"
[readonly]="true" />
<input type="text" class="form-control picker-time-field"
name="depTime" #depTime="ngModel"
[(ngModel)]="timeObj"
[owlDateTime]="dtdp"
[owlDateTimeTrigger]="dtdp"
(dateTimeChange)="onTimeChange($event)"
[readonly]="true"
required />
<owl-date-time #dtdp [pickerType]="'timer'" [hour12Timer]="false"></owl-date-time>
</div>
CSS(Note: below is SASS) :
.time-parent {
.original-time-field,
.picker-time-field {
position: absolute;
top: 0;
left: 0;
}
.original-time-field {
z-index: 2;
}
.picker-time-field {
z-index: 3;
opacity: 0;
}
}
JS :
onTimeChange(evnt) {
this.timeOrig = evnt.value.getHours() + ':' + evnt.value.getMinutes();
}
This worked fine for me, as this gives you flexibility to show time as you like.
Here is a screen: draw error.
My problem is that the single events are drawed over 2 days.
If I click on week mode the events are drawed, on day mode not.
If I click on previous/ next the calendar return "Cannot read property 'event' of undefined" and the existing events disappear.
When I click on empty day, fullcalendar sometimes return "Cannot set property 'el' of undefined".
Here is some source.
Include:
- jQuery.js
- bootstrap.js /css
- moment.js
- fullcalendar.js /css
<div id='calendar'></div>
<script>
$(window).load(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
locale: 'de',
selectable: true,
selectHelper: true,
editable: true,
allDaySlot: false,
allDayDefault: false,
eventOverlap: false,
events: "./kalender/events.php",
});
});
</script>
events.php return an json array.
[{"start":"2017-02-03T12:00:00+0100","id":7,"titel":"test","nachricht":"nachricht","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-05T12:00:00+0100","id":8,"titel":"Bf1 Key","nachricht":"test","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-10T00:00:00+0100","id":9,"titel":"asd","nachricht":"asdasd","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-17T00:00:00+0100","id":10,"titel":"sdf","nachricht":"sdf","overlap":false,"color":"rgb(255,0,0)"}]
Thanks.