Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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