How do I add events to a calendar with JavaScript - javascript

I am making a calendar with vanilla JavaScript. I would like to be able to enter events into a specific day and be able to see that day's events when I click on the day. I'm trying to do this inside the for loop that creates the calendar days but I feel like there is a better way I haven't come up with. Right now I can enter events but they do not show up for the specified day only. Any help would be greatly appreciated! Basically what I am asking is how do I create a separate list container for each calendar day that will display the events when I click on it after they have been entered.
for (i = 1; i <= days; i++) {
let calendarDay = document.createElement('div')
calendarDay.id = Math.random(1, 1000);
calendarDay.className = 'calendar-day';
calendarDay.innerHTML = i;
dateContainer.appendChild(calendarDay);
calendarDay.addEventListener('click', () => {
newEvent.style.display = 'block';
eventList.addEventListener('submit', (e) =>{
e.preventDefault();
let li = document.createElement('li');
li.className = 'task-list';
li.innerHTML = task.value;
// calArray.push(task.value)
// li.innerHTML = calArray;
newEvent.appendChild(li);
task.value = '';
});
});
}

You need to put a click event on the whole calendar, not every day. Also, when you create item-days, you need to give each a unique identifier. When you click on the calendar, handle the click on the specific day. Inside the handler you create a block element to output events related to the selected day. You take the data from the repository by its unique identifier and render it.
For example like this:
calendar.addEventListener("click", event => {
if (event.target.className == "calendarday") {
let data = eventsStore.getData(event.target.id); // events data
// create elements and data render
}
});

Related

onClick Add to Grid from an Array but duplicates on second iteration

Use case is to create Add/show/select/delete text messages on a page. I have used array to store the messages on each click till here it works fine but when I try to create Divs and show the messages in grid, I am having duplication on each click. I can see that my function is reading the array fine and creating the div's on the first click but it does not clear the previously created div on second iteration. Not sure how to approach this. Please advise.
here is the snippet.
<script>
//<!-- Fetch data from Textarea when user Click Save and create or push in an array -->
let ArrNotes = [];
function SaveNote() {
let edittext = document.getElementById("editor").value;
ArrNotes.push(edittext);
document.getElementById("SavedNote").innerHTML = ArrNotes;
let container = document.getElementById("GridNotes");
container.className= "GridNotes";
ArrNotes.forEach(createGrid);
function createGrid(item,index)
{
text = undefined;
var tag = document.createElement("div");
tag.className= "grid";
var text = document.createTextNode(index + ": " + item);
//tag.appendChild(text);
container.appendChild(text);
}
}

Clickable areas arent extending to the text

Im making a note taking application and the idea here is im trying to make a selection function to transfer my notes from the side list to the editor on the right side of the screen when clicked. So I have the list items all being created dynamically while the ul is created static.
The trouble im facing is how hard it is to click the list items. I have it console.log the work "click' whenever it registers and im not sure why its not working like its suppose it it looks like it only registers when I click the margins of the children of the li and not the h1 or p tags. Also if I click to the side, it makes my ul clickable which is not good as it would just throw everything in the editor.
I have it so when the li tags are created. It dynamically creates then via JS, adds li,h1,p,p. Appends the h1,p,p tags to the li then the li to the container.
Below is an example of my code:
//This is just to show you what happens when you click
//the submit button and how my divs are being dynamically created.
//I have them being created automatically from
//localstorage on load as well in this same fashion.
submitbutton.addEventListener('click', () => {
//Creating local variables for new notes
let NewNoteContainer = document.createElement('li')
let NewNoteTitle = document.createElement('h1')
let NewNoteDueDate = document.createElement('p')
let NewNoteContent = document.createElement('p')
let RemoveButton = document.createElement('button')
//Adds values of the input boxes to the newley created Elements
NewNoteContainer.id = NoteID
NewNoteContainer.className = 'notes-list-item'
NewNoteTitle.innerHTML = title.value
NewNoteDueDate.innerHTML = dueDate.value
NewNoteContent.innerHTML = content.value
//This appends the newly created elements to the container and then
//Appends the container to its div "note-list-container"
NewNoteContainer.append(NewNoteTitle, NewNoteDueDate,NewNoteContent)
NoteListContainer.append(NewNoteContainer)
//Creates an array, makes it a JSON string. Then stores it in localStorage
let StorageArray = [NoteID,title.value,dueDate.value,content.value]
localStorage.setItem('Note' + NoteID, JSON.stringify(StorageArray))
NoteID += 1
})
//This is the debug function im using to try and diag the click issue.
NoteListContainer.addEventListener('click', (a) => {
if(a.target.parentNode.className == 'notes-list-container') {
console.log('click')
}
})

Why is ParentNode is null on dynamically create element added to DOM

I have created a custom datepicker that opens when a date input is focused on. The content inside that datepicker is created dynamically based on the current date. I want to hide it if someone clicks outside the div, but when I try to determine if the click is inside or outside by using .closest(".date-picker") I get null. Upon further inspection my date picker doesn't return any ancestors at all, not even parentNode. Any idea why this would be?
Here is my click event listener to hide the date picker and where I am getting the null for parentNode.
window.addEventListener("DOMContentLoaded", function () {
_initDatePicker(); // <--- dynamically adding elements here
document.addEventListener("click",
function (event) {
var classes = event.target.classList; // <---- this works just fine
var parent = event.target.parentNode; // <---- returns null
// If user clicks outside the datepicker window, then close
if (!event.target.closest(".date-picker")) {
hideDatePicker();
}
},
false
);
}, false);
Here is my code where I dynamically create the content inside the div and add it to the dom
title_element.textContent = "Select Year";
cal_elements.innerHTML = ''; // Clear previous content
if (!cal_elements.classList.contains('year_list'))
cal_elements.classList.add('year_list');
for (let i = 0; i < amount_years; i++) {
let create_year = year - i;
const element = document.createElement('div'); // Create the new div
element.classList.add('cal_element');
if (create_year >= min_year) {
element.classList.add('text-light');
element.classList.add('pointer');
element.textContent = create_year;
element.addEventListener('click', function (e) {
selectedYear = this.innerText;
selected_date_element.textContent = selectedYear;
if (date_picker_element.classList.contains('years')) {
date_picker_element.classList.remove('years');
date_picker_element.classList.add('months');
}
populateDates();
});
}
cal_elements.appendChild(element); // Add div to the DOM
}
When clicking on the datepicker, I can get the ClassList of the element that I click on, but I can't get the ParentNode even though it has been added to the DOM

id of a link that a function is called from

I hope it's not a problem to post much specific code here, but I figure it will be better explained if everyone can just see it, so I will give you my code and then I will explain my problem.
My code:
function addBeGoneLinks () {
var beGoneClassElems;
var beGoneSpan;
var beGoneLink;
var beGonePrintSafe;
var spacesSpan;
//var middotSpan = document.createElement ('span');
var interactionContainer = document.getElementsByClassName('feedItemInteractionContainer');
for (var i=0; i<children.length; i++)
{
beGonePrintSafe = false;
beGoneClassElems = children[i].getElementsByClassName('beGone')
beGonePrintSafe = true;
if (beGoneClassElems.length == 0)
{
beGoneLink = document.createElement('a');
beGoneLink.href = 'javascript:void(0);';
beGoneLink.appendChild(document.createTextNode('Be Gone'));
beGoneLink.className = 'beGone';
beGoneLink.id = 'beGoneLink' + i.toString();
beGoneLink.addEventListener ("click", function() {beGone();}, false);//This line!
beGoneLink.align = 'right';
spacesSpan = document.createElement('span');
spacesSpan.innerHTML = ' - ';
if (interactionContainer[i] != undefined)
{
interactionContainer[i].appendChild(spacesSpan);
interactionContainer[i].appendChild(beGoneLink);
}
}
}
}
Here I have a function from a Greasemonkey script that I am working on. When one of the links is clicked, my aim is to have it call the function beGone() which will, among other things, remove the whole element a few parents up, thereby removing their sibling's, their parents and their parents' siblings, and one or two levels after that.
My idea was just to get the id of the link that was pressed and pass it to beGone() so that I could then get the parents using its id, but I do not know how to do that. Am I able to have the id of a link passed by the function that it calls? If not, is there any other way to do this?
I am not sure whether I am missing some really simple solution, but I haven't been able to find one rooting around the web, especially because I was unsure how I would search for this specific problem.
Try this:
beGoneLink.addEventListener("click", beGone, false);
beGone = function (evt) {
evt.target; // evt.target refers to the clicked element.
...
}
You can then use evt.target.id, evt.target.parentNode, etc.

Event handler causes many alerts

I am working on a Phonegap app, in which I access device's contacts. I then store upto 10 contacts in window.localStorage. To do so, when the user select a button, I create a div which has three elements.
An image (contact icon that represents male/female contact)
The name of the contact
Another image (represents 'add' sign to add it to window.localStorage)
I then associate an event handler, which will first check if the contact already exists in the localStorage and then proceed to add the contact. Here is the code
function checkDuplicate(somevalue)
{
for(var i=0;i<10;i++) {
if(window.localStorage.getItem(i)!=null) {
if(window.localStorage.getItem(i)==somevalue) {
navigator.notification.alert('Entry exists at Button:'+i);
return false;
}
}
}
//chosenButton is a global variable
window.localStorage.setItem(chosenButton,somevalue);
document.getElementById('contactNumberField').textContent=somevalue;
}
//Problem is with the event listener attached to span2. Please read below
function addContact(item)
{
var parentDiv = document.getElementById('thelist');
var childDiv = document.createElement('li');
var span1 = document.createElement('span');
span1.style.float='left';
span1.innerHTML = "<img src='keypad-contact.png'/>";
var span2 = document.createElement('span');
span2.style.float='right';
span2.innerHTML="<img src='keypad-addcontact.png'/>";
span2.addEventListener('click',function({checkDuplicate(item.number);},false);
childDiv.textContent=item.name;
childDiv.style.color='white';
childDiv.appendChild(span1);
childDiv.appendChild(span2);
parentDiv.appendChild(childDiv);
}
function onSuccess(contacts)
{
var objArray = new Array();
for(var i=0; i<contacts.length;i++) {
var tempObj = new Object();
tempObj['name']=contacts[i].displayName;
tempObj['number']=contacts[i].phoneNumbers[0].value;
objArray.push(tempObj);
}
objArray.sort(
function(a,b){
var nameA = a.name.toLowerCase(),nameB=b.name.toLowerCase();
if(nameA < nameB) return -1;
else if(nameA > nameB) return 1;
return 0;
});
for(var i=0; i<objArray.length;i++) addContact(objArray[i]);
}
function onDeviceReady()
{
var options = new ContactFindOptions();
options.multiple=true;
var field = ["displayName","phoneNumbers"];
navigator.contacts.find(field, onSuccess, function(){alert('NA');}, options);
}
Problem
When I try to add a contact which is already present in window.localStorage, for my first touch on span2, I get one alert. If I try to add again by touching it for the second time, I get two alerts.. and this goes on. The trouble is with the event handler associated with span2. However, I don't know how to over come this situation. How can I ensure that irrespective of how many times I press span2, I get alert only once. How to remove the event handler as soon as it is fired?
Please help.
Fixed:
The issue was not with adding event handlers dynamically. I happen to use iScroll (cubiq) for my project and that caused the trouble. Now I am not receiving multiple alerts. The trick is to declare the globlal scroller variable only once.
var scroller = null;
and then in the function
if(!scroller) scroller = new iScroll('scrollableDiv');
I hope this could be a useful tip for people who are using iScroll and struggling with multiple alerts like me.

Categories