Mixing
Drag And Drop External Events FullCalendar React-Wrapper
up vote
0
down vote
favorite
I am not being able to drop external events on the calendar.
The calendar renders correctly, and the functions select and eventClick works as expected.
I wanted to know now how to be able to drop external events in the calendar...
I've been reading the fullcalendar.io documentation and I'm not really able to do what I want.
The setting I am using is as follows:
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
I'm including jQuery-UI and the event triggers the draggable, I can hover with the external-event over the calendar.
EDIT
The drag effect is initiated in the componentDidMount lifecycle.
Note: I use a minifier in setting innerHTML, but I'll put it here without a minifier to understand it better.
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = "$('.calendar-events').each(function() {
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
})
});";
document.body.appendChild(s);
}
I have 0 errors and 0 warnings in console. And the drag effect happens like it should :/
EDIT-2
I'm currently using 2 classes to render the calendar:
1.
class Calendario extends Component {
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML =
"$('.calendar-events').each(function(){$(this).data('event',{title:$.trim($(this).text()),stick:!0}),$(this).draggable({zIndex:999,revert:!0,revertDuration:0})});";
document.body.appendChild(s);
}
render() {
return (
<>
<Grid container spacing={16} >
<Grid item md={3}>
Eventos
<div className="calendar-events">
<i className="fa fa-circle text-info" /> Consultas
</div>
</Grid>
<Grid item md={9} style={{ minHeight: '500px' }}>
<FullCalendarComponent />
</Grid>
</Grid>
</>
);
}
}
Second
export class FullCalendarComponent extends Component {
state = {
view: 'agendaWeek',
events: [
{
title: 'Static Event 1',
start: '2018-11-20T16:00:00'
},
{
title: 'Static Event 2',
start: '2018-11-21T16:00:00',
end: '2018-11-21T18:00:00'
},
{
title: 'Static Event 3',
start: '2018-11-20T11:00:00',
end: '2018-11-20T13:00:00'
},
{
title: 'Static Event 4',
start: '2018-11-22T14:00:00',
end: '2018-11-22T16:00:00'
}
]
};
shouldComponentUpdate(nextProps, nextState) {
if (this.state.events !== nextState.events) {
return true;
}
return false;
}
handleDrop = (eventObj, date) => {
console.group('onDrop');
console.log('date');
console.dir(date);
console.groupEnd();
};
handleSelect = (start, end, allDay) => {
console.group('select');
console.log('start');
console.dir(start);
console.dir('end');
console.dir(end);
console.groupEnd();
};
handleClick = (calEvent, jsEvent, view) => {
console.group('click');
console.log('calEvent');
console.dir(calEvent);
console.groupEnd();
};
handleChangeView = view => e => {
e.preventDefault();
this.setState({
view: view.name
});
};
render() {
const { events, view } = this.state;
return (
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
);
}
}
In my index.html file, I'm including scripts to jquery.min.js and jquery-ui.min.js
javascript reactjs fullcalendar
asked yesterday
Rafael Veloso
34
|
show 5 more comments
up vote
0
down vote
favorite
I am not being able to drop external events on the calendar.
The calendar renders correctly, and the functions select and eventClick works as expected.
I wanted to know now how to be able to drop external events in the calendar...
I've been reading the fullcalendar.io documentation and I'm not really able to do what I want.
The setting I am using is as follows:
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
I'm including jQuery-UI and the event triggers the draggable, I can hover with the external-event over the calendar.
EDIT
The drag effect is initiated in the componentDidMount lifecycle.
Note: I use a minifier in setting innerHTML, but I'll put it here without a minifier to understand it better.
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = "$('.calendar-events').each(function() {
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
})
});";
document.body.appendChild(s);
}
I have 0 errors and 0 warnings in console. And the drag effect happens like it should :/
EDIT-2
I'm currently using 2 classes to render the calendar:
1.
class Calendario extends Component {
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML =
"$('.calendar-events').each(function(){$(this).data('event',{title:$.trim($(this).text()),stick:!0}),$(this).draggable({zIndex:999,revert:!0,revertDuration:0})});";
document.body.appendChild(s);
}
render() {
return (
<>
<Grid container spacing={16} >
<Grid item md={3}>
Eventos
<div className="calendar-events">
<i className="fa fa-circle text-info" /> Consultas
</div>
</Grid>
<Grid item md={9} style={{ minHeight: '500px' }}>
<FullCalendarComponent />
</Grid>
</Grid>
</>
);
}
}
Second
export class FullCalendarComponent extends Component {
state = {
view: 'agendaWeek',
events: [
{
title: 'Static Event 1',
start: '2018-11-20T16:00:00'
},
{
title: 'Static Event 2',
start: '2018-11-21T16:00:00',
end: '2018-11-21T18:00:00'
},
{
title: 'Static Event 3',
start: '2018-11-20T11:00:00',
end: '2018-11-20T13:00:00'
},
{
title: 'Static Event 4',
start: '2018-11-22T14:00:00',
end: '2018-11-22T16:00:00'
}
]
};
shouldComponentUpdate(nextProps, nextState) {
if (this.state.events !== nextState.events) {
return true;
}
return false;
}
handleDrop = (eventObj, date) => {
console.group('onDrop');
console.log('date');
console.dir(date);
console.groupEnd();
};
handleSelect = (start, end, allDay) => {
console.group('select');
console.log('start');
console.dir(start);
console.dir('end');
console.dir(end);
console.groupEnd();
};
handleClick = (calEvent, jsEvent, view) => {
console.group('click');
console.log('calEvent');
console.dir(calEvent);
console.groupEnd();
};
handleChangeView = view => e => {
e.preventDefault();
this.setState({
view: view.name
});
};
render() {
const { events, view } = this.state;
return (
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
);
}
}
In my index.html file, I'm including scripts to jquery.min.js and jquery-ui.min.js
javascript reactjs fullcalendar
asked yesterday
Rafael Veloso
34
Have you seen the demo (fullcalendar.io/releases/fullcalendar/3.9.0/demos/…) and studied the source code of it?
– ADyson
yesterday
Yes, I checked the code used in the documentation step by step and I followed these steps exactly. I have a version that works without using react, but now I wanted to make the transition. I start to think it might be from the package fullcalendar-reactwrapper...
– Rafael Veloso
yesterday
ok thanks. So you say "I can hover with the external-event over the calendar"...what happens next? Any errors? Also you haven't actually shown us any of your draggable code so I can't really be sure if you've done it in a way that would be expected to work. I can't really see what difference react would be making here either.
– ADyson
yesterday
I edited my question with the code that I think you asked
– Rafael Veloso
yesterday
why are you building a script like that? What's wrong with just writing it as a normal script?? You're already in a JS function, so why not just keep writing JS, instead of making a string and then adding a tag to the page? Maybe I missed something but I can't understand what the advantage of that would be. And also where are your HTML draggable elements? I don't know if you've got anything with the "calendar-events" class to actually iterate over.
– ADyson
yesterday
|
show 5 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am not being able to drop external events on the calendar.
The calendar renders correctly, and the functions select and eventClick works as expected.
I wanted to know now how to be able to drop external events in the calendar...
I've been reading the fullcalendar.io documentation and I'm not really able to do what I want.
The setting I am using is as follows:
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
I'm including jQuery-UI and the event triggers the draggable, I can hover with the external-event over the calendar.
EDIT
The drag effect is initiated in the componentDidMount lifecycle.
Note: I use a minifier in setting innerHTML, but I'll put it here without a minifier to understand it better.
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = "$('.calendar-events').each(function() {
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
})
});";
document.body.appendChild(s);
}
I have 0 errors and 0 warnings in console. And the drag effect happens like it should :/
EDIT-2
I'm currently using 2 classes to render the calendar:
1.
class Calendario extends Component {
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML =
"$('.calendar-events').each(function(){$(this).data('event',{title:$.trim($(this).text()),stick:!0}),$(this).draggable({zIndex:999,revert:!0,revertDuration:0})});";
document.body.appendChild(s);
}
render() {
return (
<>
<Grid container spacing={16} >
<Grid item md={3}>
Eventos
<div className="calendar-events">
<i className="fa fa-circle text-info" /> Consultas
</div>
</Grid>
<Grid item md={9} style={{ minHeight: '500px' }}>
<FullCalendarComponent />
</Grid>
</Grid>
</>
);
}
}
Second
export class FullCalendarComponent extends Component {
state = {
view: 'agendaWeek',
events: [
{
title: 'Static Event 1',
start: '2018-11-20T16:00:00'
},
{
title: 'Static Event 2',
start: '2018-11-21T16:00:00',
end: '2018-11-21T18:00:00'
},
{
title: 'Static Event 3',
start: '2018-11-20T11:00:00',
end: '2018-11-20T13:00:00'
},
{
title: 'Static Event 4',
start: '2018-11-22T14:00:00',
end: '2018-11-22T16:00:00'
}
]
};
shouldComponentUpdate(nextProps, nextState) {
if (this.state.events !== nextState.events) {
return true;
}
return false;
}
handleDrop = (eventObj, date) => {
console.group('onDrop');
console.log('date');
console.dir(date);
console.groupEnd();
};
handleSelect = (start, end, allDay) => {
console.group('select');
console.log('start');
console.dir(start);
console.dir('end');
console.dir(end);
console.groupEnd();
};
handleClick = (calEvent, jsEvent, view) => {
console.group('click');
console.log('calEvent');
console.dir(calEvent);
console.groupEnd();
};
handleChangeView = view => e => {
e.preventDefault();
this.setState({
view: view.name
});
};
render() {
const { events, view } = this.state;
return (
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
);
}
}
In my index.html file, I'm including scripts to jquery.min.js and jquery-ui.min.js
javascript reactjs fullcalendar
asked yesterday
Rafael Veloso
34
I am not being able to drop external events on the calendar.
The calendar renders correctly, and the functions select and eventClick works as expected.
I wanted to know now how to be able to drop external events in the calendar...
I've been reading the fullcalendar.io documentation and I'm not really able to do what I want.
The setting I am using is as follows:
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
I'm including jQuery-UI and the event triggers the draggable, I can hover with the external-event over the calendar.
EDIT
The drag effect is initiated in the componentDidMount lifecycle.
Note: I use a minifier in setting innerHTML, but I'll put it here without a minifier to understand it better.
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = "$('.calendar-events').each(function() {
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
})
});";
document.body.appendChild(s);
}
I have 0 errors and 0 warnings in console. And the drag effect happens like it should :/
EDIT-2
I'm currently using 2 classes to render the calendar:
1.
class Calendario extends Component {
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML =
"$('.calendar-events').each(function(){$(this).data('event',{title:$.trim($(this).text()),stick:!0}),$(this).draggable({zIndex:999,revert:!0,revertDuration:0})});";
document.body.appendChild(s);
}
render() {
return (
<>
<Grid container spacing={16} >
<Grid item md={3}>
Eventos
<div className="calendar-events">
<i className="fa fa-circle text-info" /> Consultas
</div>
</Grid>
<Grid item md={9} style={{ minHeight: '500px' }}>
<FullCalendarComponent />
</Grid>
</Grid>
</>
);
}
}
Second
export class FullCalendarComponent extends Component {
state = {
view: 'agendaWeek',
events: [
{
title: 'Static Event 1',
start: '2018-11-20T16:00:00'
},
{
title: 'Static Event 2',
start: '2018-11-21T16:00:00',
end: '2018-11-21T18:00:00'
},
{
title: 'Static Event 3',
start: '2018-11-20T11:00:00',
end: '2018-11-20T13:00:00'
},
{
title: 'Static Event 4',
start: '2018-11-22T14:00:00',
end: '2018-11-22T16:00:00'
}
]
};
shouldComponentUpdate(nextProps, nextState) {
if (this.state.events !== nextState.events) {
return true;
}
return false;
}
handleDrop = (eventObj, date) => {
console.group('onDrop');
console.log('date');
console.dir(date);
console.groupEnd();
};
handleSelect = (start, end, allDay) => {
console.group('select');
console.log('start');
console.dir(start);
console.dir('end');
console.dir(end);
console.groupEnd();
};
handleClick = (calEvent, jsEvent, view) => {
console.group('click');
console.log('calEvent');
console.dir(calEvent);
console.groupEnd();
};
handleChangeView = view => e => {
e.preventDefault();
this.setState({
view: view.name
});
};
render() {
const { events, view } = this.state;
return (
<FullCalendar
id="calendario"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}}
navLinks={true}
nowIndicator={true}
viewRender={(view, element) => {
this.handleChangeView(view);
}}
selectable={true}
editable={true}
droppable={true}
eventDrop={function(eventBj, date) {
console.log('eventDrop function');
}}
drop={(date, jsEvent, ui, resourceId) => {
console.log('drop function');
}}
select={(start, end, allDay) => {
this.handleSelect(start, end, allDay);
}}
eventClick={(calEvent, jsEvent, view) => {
this.handleClick(calEvent, jsEvent, view);
}}
events={events}
/>
);
}
}
In my index.html file, I'm including scripts to jquery.min.js and jquery-ui.min.js
javascript reactjs fullcalendar
javascript reactjs fullcalendar
asked yesterday
Rafael Veloso
34
asked yesterday
Rafael Veloso
34
edited yesterday
asked yesterday
Rafael Veloso
34
asked yesterday
Rafael Veloso
34
asked yesterday
Rafael Veloso
34
34
Have you seen the demo (fullcalendar.io/releases/fullcalendar/3.9.0/demos/…) and studied the source code of it?
– ADyson
yesterday
Yes, I checked the code used in the documentation step by step and I followed these steps exactly. I have a version that works without using react, but now I wanted to make the transition. I start to think it might be from the package fullcalendar-reactwrapper...
– Rafael Veloso
yesterday
ok thanks. So you say "I can hover with the external-event over the calendar"...what happens next? Any errors? Also you haven't actually shown us any of your draggable code so I can't really be sure if you've done it in a way that would be expected to work. I can't really see what difference react would be making here either.
– ADyson
yesterday
I edited my question with the code that I think you asked
– Rafael Veloso
yesterday
why are you building a script like that? What's wrong with just writing it as a normal script?? You're already in a JS function, so why not just keep writing JS, instead of making a string and then adding a tag to the page? Maybe I missed something but I can't understand what the advantage of that would be. And also where are your HTML draggable elements? I don't know if you've got anything with the "calendar-events" class to actually iterate over.
– ADyson
yesterday
|
show 5 more comments
Have you seen the demo (fullcalendar.io/releases/fullcalendar/3.9.0/demos/…) and studied the source code of it?
– ADyson
yesterday
Yes, I checked the code used in the documentation step by step and I followed these steps exactly. I have a version that works without using react, but now I wanted to make the transition. I start to think it might be from the package fullcalendar-reactwrapper...
– Rafael Veloso
yesterday
ok thanks. So you say "I can hover with the external-event over the calendar"...what happens next? Any errors? Also you haven't actually shown us any of your draggable code so I can't really be sure if you've done it in a way that would be expected to work. I can't really see what difference react would be making here either.
– ADyson
yesterday
I edited my question with the code that I think you asked
– Rafael Veloso
yesterday
why are you building a script like that? What's wrong with just writing it as a normal script?? You're already in a JS function, so why not just keep writing JS, instead of making a string and then adding a tag to the page? Maybe I missed something but I can't understand what the advantage of that would be. And also where are your HTML draggable elements? I don't know if you've got anything with the "calendar-events" class to actually iterate over.
– ADyson
yesterday
Have you seen the demo (fullcalendar.io/releases/fullcalendar/3.9.0/demos/…) and studied the source code of it?
– ADyson
yesterday
Have you seen the demo (fullcalendar.io/releases/fullcalendar/3.9.0/demos/…) and studied the source code of it?
– ADyson
yesterday
Yes, I checked the code used in the documentation step by step and I followed these steps exactly. I have a version that works without using react, but now I wanted to make the transition. I start to think it might be from the package fullcalendar-reactwrapper...
– Rafael Veloso
yesterday
Yes, I checked the code used in the documentation step by step and I followed these steps exactly. I have a version that works without using react, but now I wanted to make the transition. I start to think it might be from the package fullcalendar-reactwrapper...
– Rafael Veloso
yesterday
ok thanks. So you say "I can hover with the external-event over the calendar"...what happens next? Any errors? Also you haven't actually shown us any of your draggable code so I can't really be sure if you've done it in a way that would be expected to work. I can't really see what difference react would be making here either.
– ADyson
yesterday
ok thanks. So you say "I can hover with the external-event over the calendar"...what happens next? Any errors? Also you haven't actually shown us any of your draggable code so I can't really be sure if you've done it in a way that would be expected to work. I can't really see what difference react would be making here either.
– ADyson
yesterday
I edited my question with the code that I think you asked
– Rafael Veloso
yesterday
I edited my question with the code that I think you asked
– Rafael Veloso
yesterday
why are you building a script like that? What's wrong with just writing it as a normal script?? You're already in a JS function, so why not just keep writing JS, instead of making a string and then adding a tag to the page? Maybe I missed something but I can't understand what the advantage of that would be. And also where are your HTML draggable elements? I don't know if you've got anything with the "calendar-events" class to actually iterate over.
– ADyson
yesterday
why are you building a script like that? What's wrong with just writing it as a normal script?? You're already in a JS function, so why not just keep writing JS, instead of making a string and then adding a tag to the page? Maybe I missed something but I can't understand what the advantage of that would be. And also where are your HTML draggable elements? I don't know if you've got anything with the "calendar-events" class to actually iterate over.
– ADyson
yesterday
|
show 5 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372640%2fdrag-and-drop-external-events-fullcalendar-react-wrapper%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you seen the demo (fullcalendar.io/releases/fullcalendar/3.9.0/demos/…) and studied the source code of it?
– ADyson
yesterday
Yes, I checked the code used in the documentation step by step and I followed these steps exactly. I have a version that works without using react, but now I wanted to make the transition. I start to think it might be from the package fullcalendar-reactwrapper...
– Rafael Veloso
yesterday
ok thanks. So you say "I can hover with the external-event over the calendar"...what happens next? Any errors? Also you haven't actually shown us any of your draggable code so I can't really be sure if you've done it in a way that would be expected to work. I can't really see what difference react would be making here either.
– ADyson
yesterday
I edited my question with the code that I think you asked
– Rafael Veloso
yesterday
why are you building a script like that? What's wrong with just writing it as a normal script?? You're already in a JS function, so why not just keep writing JS, instead of making a string and then adding a tag to the page? Maybe I missed something but I can't understand what the advantage of that would be. And also where are your HTML draggable elements? I don't know if you've got anything with the "calendar-events" class to actually iterate over.
– ADyson
yesterday