Home / Questions / 224140
Accepted
EMCode
Asked: 2020-12-19 08:45:32 +0800 CST 2020-12-19 08:45:32 +0800 CST

Add events in jsCalendar

  • 772

Searching through various calendar plugins , I found one called jsCalendar by GramThanos .

Among its demos, there is a view called Date Events , which seems perfect for what I need: Greeting people who are having a birthday according to the day.

But as much as I search its official documentation , I don't see how to add one or more events to a given day.

With JS, predefined events are added with the function onclick, displayed in an alert and temporarily inserted:

// Add events
                calendar.onDateClick(function(event, date){
                    // Update calendar date
                    calendar.set(date);
                    // Show events
                    showEvents(date);
                });

                elements.addButton.addEventListener("click", function(){

 // Get event name
                    var names = ["John", "Bob", "Anna", "George", "Harry", "Jack", "Alexander"];
                    var name = prompt(
                        "Event info",
                        names[Math. floor(Math.random() * names.length)] + "'s birthday."
                    );

Can I add events manually in this plugin , or is it just visual?

Some time ago I used fullcalendar.js and I could do it by importing my Google Calendar events automatically, but if I have to do it manually I have no problem.

PS: In the Date Events example you can edit the events, I do NOT want them to be editable on the user side.

I accept any suggestion or if there are other alternatives, they are welcome.

Thanks for your time!

javascript

3 Answers

  1. Best Answer

    Just hit play and look at the comments in the code, it's what you're looking for. Check February 12 and February 21.

    // Get elements
			var elements = {
				// Calendar element
				calendar : document.getElementById("events-calendar"),
				// Input element
				events : document.getElementById("events")
			}

			// Create the calendar
			elements.calendar.className = "clean-theme";
			var calendar = jsCalendar.new(elements.calendar);

			// Create events elements
			elements.title = document.createElement("div");
			elements.title.className = "title";
			elements.events.appendChild(elements.title);
			elements.subtitle = document.createElement("div");
			elements.subtitle.className = "subtitle";
			elements.events.appendChild(elements.subtitle);
			elements.list = document.createElement("div");
			elements.list.className = "list";
			elements.events.appendChild(elements.list);
			elements.actions = document.createElement("div");
			elements.actions.className = "action";
			elements.events.appendChild(elements.actions);
			elements.addButton = document.createElement("input");
			elements.addButton.type = "button";
			elements.addButton.value = "Add";
			elements.actions.appendChild(elements.addButton);

			var events = {};
			var date_format = "DD/MM/YYYY";
			var current = null;

			var showEvents = function(date){
				// Date string
				var id = jsCalendar.tools.dateToString(date, date_format, "en");
				// Set date
				current = new Date(date.getTime());
				// Set title
				elements.title.textContent = id;
				// Clear old events
				elements.list.innerHTML = "";
				// Add events on list
				if (events.hasOwnProperty(id) && events[id].length) {
					// Number of events
					elements.subtitle.textContent = events[id].length + " " + ((events[id].length > 1) ? "events" : "event");

					var div;
					var close;
					// For each event
					for (var i = 0; i < events[id].length; i++) {
						div = document.createElement("div");
						div.className = "event-item";
						div.textContent = (i + 1) + ". " + events[id][i].name;
						elements.list.appendChild(div);
						close = document.createElement("div");
						close.className = "close";
						close.textContent = "×";
						div.appendChild(close);
						close.addEventListener("click", (function (date, index) {
							return function () {
								removeEvent(date, index);
							}
						})(date, i), false);
					}
				} else {
					elements.subtitle.textContent = "No events";
				}
			};

			var removeEvent = function (date, index) {
				// Date string
				var id = jsCalendar.tools.dateToString(date, date_format, "en");

				// If no events return
				if (!events.hasOwnProperty(id)) {
					return;
				}
				// If not found
				if (events[id].length <= index) {
					return;
				}

				// Remove event
				events[id].splice(index, 1);

				// Refresh events
				showEvents(current);

				// If no events uncheck date
				if (events[id].length === 0) {
					calendar.unselect(date);
				}
			}

			// Show current date events
			showEvents(new Date());

			// Add events
			calendar.onDateClick(function(event, date){
				// Update calendar date
				calendar.set(date);
				// Show events
				showEvents(date);
			});

			elements.addButton.addEventListener("click", function(){
				// Get event name
				var names = ["John", "Bob", "Anna", "George", "Harry", "Jack", "Alexander"];
				var name = prompt(
					"Event info",
					names[Math. floor(Math.random() * names.length)] + "'s birthday."
				);

				//Return on cancel
				if (name === null || name === "") {
					return;
				}

				// Date string
				var id = jsCalendar.tools.dateToString(current, date_format, "en");

				// If no events, create list
				if (!events.hasOwnProperty(id)) {
					// Select date
					calendar.select(current);
					// Create list
					events[id] = [];
				}

				// Add event
				events[id].push({name : name});

				// Refresh events
				showEvents(current);
			}, false);
      
      //Agregando elementos de manera dinamica:
      //Cumpleaños de Lucía, Febrero 12
      var luciaBirthday = new Date(2019, 1, 12); //Ese 1 es porque en JavaScript, los meses comienzan en CERO = Enero.
      //Cumpleaños de Mily, Febrero 21
      var milyBirthday = new Date(2019, 1, 21);
      //Cumpleaños de Angie, Febrero 24
      var angieBirthday = new Date(2019, 1, 24);
     cargarMensaje(luciaBirthday, "Cumple de Luuuuu!!!");
     cargarMensaje(milyBirthday, "Cumple de Milyyyy!!!");
     cargarMensaje(angieBirthday , "Cumple de Angieee!!!");
      
      function cargarMensaje(fecha, mensaje){
       var id = jsCalendar.tools.dateToString(fecha, date_format, "en");      
      		// If no events, create list
				if (!events.hasOwnProperty(id)) {
					// Select date
					calendar.select(current);
					// Create list
					events[id] = [];
				}
        	events[id].push({name : mensaje});
            // Refresh events: Mostramos los eventos del día actual.
 				showEvents(current);
      }
      
    			html, body {
				font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
			}
			.description {
				text-align: center;
				padding-bottom: 40px;
			}
			.jsCalendar.clean-theme tbody td.jsCalendar-previous, .jsCalendar.clean-theme tbody td.jsCalendar-next {
				color: #000;
				opacity: 0.2;
			}
			#wrapper {
				margin: 0 auto;
				width: 800px;
				box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
			}
			#wrapper .jsCalendar table {
				box-shadow: none;
			}
			.clear {
				clear: both;
			}
			#events-calendar {
				float: left;
			}
			#events {
				float: left;
				width: 435px;
				margin: 10px 20px 10px 5px;
			}
			#events .title {
				padding: 5px 0px;
				text-align: center;
				font-weight: bold;
				border-bottom: 1px solid rgba(0, 0, 0, 0.4);
			}
			#events .subtitle {
				padding: 5px 0px;
				font-size: 14px;
				text-align: center;
				color: #888;
			}
			#events .list {
				height: 250px;
				overflow-y: auto;
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			}
			#events .list .event-item {
				line-height: 24px;
				min-height: 24px;
				padding: 2px 5px;
				border-top: 1px solid rgba(0, 0, 0, 0.2);
			}
			#events .list .event-item .close {
				font-family: Tahoma, Geneva, sans-serif;
				font-weight: bold;
				font-size: 12px;
				color: #000;
				border-radius: 8px;
				height: 14px;
				width: 14px;
				line-height: 12px;
				text-align: center;
				float: right;
				border: 1px solid rgba(0, 0, 0, 0.5);
				padding: 0px;
				margin: 5px;
				display: block;
				overflow: hidden;
				background: #F44336;
				cursor: pointer;
			}
			#events .action {
				text-align: right;
			}
			#events .action input {
				padding: 0px 5px;
				font-size: 12px;
				margin: 10px 5px;
				border: 1px solid #999999;
				height: 28px;
				line-height: 28px;
				width: 120px;
				background: #f8f8f8;
				color: black;
				cursor: pointer;
				transition: all 0.2s;
			}
			#events .action input:hover {
				background: #eee;
				border: 1px solid #000;
				box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
			}
			.version {
				font-size: 12px;
				width: 800px;
				margin: 0 auto;
				text-align: right;
			}
		
    <script src="https://gramthanos.github.io/jsCalendar/js/jsCalendar.min.js"></script>
<link href="https://gramthanos.github.io/jsCalendar/css/jsCalendar.min.css" rel="stylesheet"/>
<link href="https://gramthanos.github.io/jsCalendar/css/themes/jsCalendar.clean.min.css" rel="stylesheet"/>
		<div id="wrapper">
			<!-- Calendar element -->
			<div id="events-calendar"></div>
			<!-- Events -->
			<div id="events"></div>
			<!-- Clear -->
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
    </div>

    Now, consider keeping in mind that birthdays will always be shown in the current year. If you put the date of birth of the event, it can only be seen in that year, this may be obvious, however there are many programmers who are just starting out and the more ideas they have, the better it will be for them. Greetings :D

    • 6

  2. No hay nada de mágico con los eventos, simplemente es una variable de arreglo cuyo indice es la fecha, corre el ejemplo de la documentacion oficial y depuralo en el navegador para que examines la variable events. Puedes manipular dicha variable agregando mas eventos de la siguiente forma:

    events[id].push({name : datos});

    Lo cual lo hace dentro del disparador de eventos de pulsar el boton Add elements.addButton.addEventListener("click", function()

    Ahora bien si te fijas en la documentacion oficial de jscalendar para eliminar eventos simple y llanamente se sigue trabajando con la variable de arreglo:

    events[id].splice(index, 1);

    Esto ultimo se ve en var removeEvent = function (date, index)

    • 2

  3. Hello, you could do something like this:

    		// Get elements
			var elements = {
				// Calendar element
				calendar : document.getElementById("events-calendar"),
				// Input element
				events : document.getElementById("events")
			}

			// Create the calendar
			elements.calendar.className = "clean-theme";
			var calendar = jsCalendar.new(elements.calendar);

			// Create events elements
			elements.title = document.createElement("div");
			elements.title.className = "title";
			elements.events.appendChild(elements.title);
			elements.subtitle = document.createElement("div");
			elements.subtitle.className = "subtitle";
			elements.events.appendChild(elements.subtitle);
			elements.list = document.createElement("div");
			elements.list.className = "list";
			elements.events.appendChild(elements.list);
			elements.actions = document.createElement("div");
			elements.actions.className = "action";
			elements.events.appendChild(elements.actions);
			elements.addButton = document.createElement("input");
			elements.addButton.type = "button";
			elements.addButton.value = "Agregar";
			elements.actions.appendChild(elements.addButton);

			var events = {};
			var date_format = "DD/MM/YYYY";
			var current = null;

			var showEvents = function(date){
				// Date string
				var id = jsCalendar.tools.dateToString(date, date_format, "es");
				// Set date
				current = new Date(date.getTime());
				// Set title
				elements.title.textContent = id;
				// Clear old events
				elements.list.innerHTML = "";
				// Add events on list
				if (events.hasOwnProperty(id) && events[id].length) {
					// Number of events
					elements.subtitle.textContent = events[id].length + " " + ((events[id].length > 1) ? "events" : "event");

					var div;
					var close;
					// For each event
					for (var i = 0; i < events[id].length; i++) {
						div = document.createElement("div");
						div.className = "event-item";
						div.textContent = (i + 1) + ". " + events[id][i].name;
						elements.list.appendChild(div);
						close = document.createElement("div");
						close.className = "close";
						close.textContent = "×";
						div.appendChild(close);
						close.addEventListener("click", (function (date, index) {
							return function () {
								removeEvent(date, index);
							}
						})(date, i), false);
					}
				} else {
					elements.subtitle.textContent = "No events";
				}
			};

			var removeEvent = function (date, index) {
				// Date string
				var id = jsCalendar.tools.dateToString(date, date_format, "es");

				// If no events return
				if (!events.hasOwnProperty(id)) {
					return;
				}
				// If not found
				if (events[id].length <= index) {
					return;
				}

				// Remove event
				events[id].splice(index, 1);

				// Refresh events
				showEvents(current);

				// If no events uncheck date
				if (events[id].length === 0) {
					calendar.unselect(date);
				}
			}

			// Show current date events
			showEvents(new Date());

			// Add events
			calendar.onDateClick(function(event, date){
				// Update calendar date
				calendar.set(date);
				// Show events
				showEvents(date);
			});

			elements.addButton.addEventListener("click", function(){
				// Get event name
				var names = ["David", "Bob", "Ana", "Jorge", "Harry", "Jack", "Alexander"];
				var name = prompt(
					"Event info",
					names[Math. floor(Math.random() * names.length)] + " Cumpleaños."
				);

				//Return on cancel
				if (name === null || name === "") {
					return;
				}

				// Date string
				var id = jsCalendar.tools.dateToString(current, date_format, "en");

				// If no events, create list
				if (!events.hasOwnProperty(id)) {
					// Select date
					calendar.select(current);
					// Create list
					events[id] = [];
				}

				// Add event
				events[id].push({name : name});

				// Refresh events
				showEvents(current);
			}, false);
    	html, body {
				font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
			}
			.description {
				text-align: center;
				padding-bottom: 40px;
			}
			.jsCalendar.clean-theme tbody td.jsCalendar-previous, .jsCalendar.clean-theme tbody td.jsCalendar-next {
				color: #000;
				opacity: 0.2;
			}
			#wrapper {
				margin: 0 auto;
				width: 800px;
				box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
			}
			#wrapper .jsCalendar table {
				box-shadow: none;
			}
			.clear {
				clear: both;
			}
			#events-calendar {
				float: left;
			}
			#events {
				float: left;
				width: 435px;
				margin: 10px 20px 10px 5px;
			}
			#events .title {
				padding: 5px 0px;
				text-align: center;
				font-weight: bold;
				border-bottom: 1px solid rgba(0, 0, 0, 0.4);
			}
			#events .subtitle {
				padding: 5px 0px;
				font-size: 14px;
				text-align: center;
				color: #888;
			}
			#events .list {
				height: 250px;
				overflow-y: auto;
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			}
			#events .list .event-item {
				line-height: 24px;
				min-height: 24px;
				padding: 2px 5px;
				border-top: 1px solid rgba(0, 0, 0, 0.2);
			}
			#events .list .event-item .close {
				font-family: Tahoma, Geneva, sans-serif;
				font-weight: bold;
				font-size: 12px;
				color: #000;
				border-radius: 8px;
				height: 14px;
				width: 14px;
				line-height: 12px;
				text-align: center;
				float: right;
				border: 1px solid rgba(0, 0, 0, 0.5);
				padding: 0px;
				margin: 5px;
				display: block;
				overflow: hidden;
				background: #F44336;
				cursor: pointer;
			}
			#events .action {
				text-align: right;
			}
			#events .action input {
				padding: 0px 5px;
				font-size: 12px;
				margin: 10px 5px;
				border: 1px solid #999999;
				height: 28px;
				line-height: 28px;
				width: 120px;
				background: #f8f8f8;
				color: black;
				cursor: pointer;
				transition: all 0.2s;
			}
			#events .action input:hover {
				background: #eee;
				border: 1px solid #000;
				box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
			}
		
    		<link rel="stylesheet" type="text/css" href="https://gramthanos.github.io/jsCalendar/css/jsCalendar.min.css">
		<link rel="stylesheet" type="text/css" href="https://gramthanos.github.io/jsCalendar/css/themes/jsCalendar.clean.min.css">
<script type="text/javascript" src="https://gramthanos.github.io/jsCalendar/js/jsCalendar.min.js"></script>

<!-- DEFINIENDO TU CALENDAR -->
<div id="wrapper">
  <!-- Calendar -->
  <div id="events-calendar"></div>
  <!-- Eventos -->
  <div id="events"></div>
</div>

    First in the HTML I load the default JsCalendar libraries, then I define my HTML. I will also add a bit of CSS to give a better appearance to the option to add events that is built in a div.

    In the JavaScript what I do is define my Jscalendar, a default list of predefined random events is also created, they can be ignored, when clicking on the add button I will get an input to add the name of the event, I add it and I can change between dates and my events will be held... it's a basic guide I hope it helps you. can you see it here

    • 1