Topic: Add event name to calendar
asmiles free asked 5 years ago
Expected behavior Adding an event name (only the date choice is available)
Actual behavior None I don't know how to add an event name
Resources (screenshots, code snippets etc.)
How would I add the name to the event date that I input at the top of the screen please? Do I have to edit the html code after or am I missing where the event name is entered into full-calendar? I see the "Enter date in YYYY-MM-DD format" but nowhere to enter the event text.
Magdalena Dembna staff answered 5 years ago
This is the code responsible for the prompt you see after clicking Add new event
button :
addEventButton: {
text: 'Add new event',
click: function () {
var dateStr = prompt('Enter date in YYYY-MM-DD format');
var date = moment(dateStr);
if (date.isValid()) {
$('#calendar').fullCalendar('renderEvent', {
title: 'Dynamic event',
start: date,
allDay: true
});
} else {
alert('Invalid Date');
}
}
}
Right now event's title is hard-coded as 'Dynamic event'
. If you wish to replace it with user's input, you could add another prompt window and assign it's value to a variable which will later replace 'Dynamic event'
in 'renderEvent'
:
addEventButton: {
text: 'Add new event',
click: function () {
const dateStr = prompt('Enter date in YYYY-MM-DD format');
const date = moment(dateStr);
const title = prompt('Enter title');
if (date.isValid()) {
$('#calendar').fullCalendar('renderEvent', {
title: title
start: date,
allDay: true
});
} else {
alert('Invalid Date');
}
}
}
asmiles free answered 5 years ago
I have no idea what that means as I am not a coder. Also, taking the time to give an example would be really appreciated... The best companies to invest in I find are the ones that will take the time to provide solutions and examples to people who don't have the ability and helping them to learn rather than copying and pasting links. However I think I see that I can change the JS where I could simply edit the start and end dates as well as editing the title and description which will show on mouse-over. This example also has the start and end time included:
enter code here { title: 'Meeting', description: 'description for Meeting', start: '2018-11-12T10:30:00', end: '2018-11-12T12:30:00' },
Magdalena Dembna staff answered 5 years ago
You can find Javascript code in Javascript
tab in this example and modify logic of click
method according to your needs: https://mdbootstrap.com/plugins/jquery/full-calendar/#dynamic-events
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.2
- Device: All
- Browser: All
- OS: Windows
- Provided sample code: No
- Provided link: No