I need to design this screen with vuejs and I decided to use FullCalendar library
I added my FullCalendar component.
When I try to render button with DaycellContent, I am not successful
here is my fullcalendar options
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
// dateClick: this.handleDateClick,
headerToolbar: {
start: "",
center: "title",
end: "today,prevYear,prev,next,nextYear",
},
locale: "tr",
events: [
{ title: "event 1", date: "2023-01-01" },
{ title: "event 2", date: "2023-01-02" },
],
dayCellContent: (date) => {
return `
<button class="my-button" onClick="console.log('Button 1 clicked on ${date.toString()}')">Button 1</button>
<button class="my-button" onClick="console.log('Button 2 clicked on ${date.toString()}')">Button 2</button>
<button class="my-button" onClick="console.log('Button 3 clicked on ${date.toString()}')">Button 3</button>
`;
},
},
the result
As per the content injection documentation, if you want to return HTML you need to put that in a specific property of the returned object. If you simply return a string it will be treated as plain text.
So the data you return will need to be in this format: { html: "your HTML content here" }.
In your example, this is the solution:
dayCellContent: (date) => {
return { html: `
<button class="my-button" onClick="console.log('Button 1 clicked on ${date.toString()}')">Button 1</button>
<button class="my-button" onClick="console.log('Button 2 clicked on ${date.toString()}')">Button 2</button>
<button class="my-button" onClick="console.log('Button 3 clicked on ${date.toString()}')">Button 3</button>
`};
}
Demo (using plain JS, but the solution is identical): https://codepen.io/ADyson82/pen/rNrdeJp
Related
I want to make a "numeric keyboard" that shows buttons with symbols from 0-9. When I press each button it is suppose to add up.
So lets say i press 3 , 4 then 1 it should say 341 on the text box or number box idk (srry im new).
I have only taken some examples from my teacher so i dont know if this is the right method.
I tried this on button 0:
<button onclick="showZero()">0</button>
<button onclick="">1</button>
<button onclick="">2</button>
<button onclick="">3</button>
<button onclick="">4</button>
<button onclick="">5</button>
<button onclick="">6</button>
<button onclick="">7</button>
<button onclick="">8</button>
<button onclick="">9</button>
<br>
<input type="text" id="txtZero">
window.onload = start;
function start() {}
function showZero()
{
var zero = document.getElementById("Number");
zero.Value="0";
document.querySelector("txtZero").appendChild(zero);
}
Am i using wrong method? I saw my teacher example, but he was using this to generate more buttons and not numbers like im trying to do.
EDIT: I edited my answer to provide a better answer that doesn't use inline event handling. I also wrapped the code into DOMContentLoaded event listener to make sure JS runs after the DOM is fully loaded.
function ready() {
// The textfield element
textField = document.getElementById("field")
// The reset button
resetButton = document.getElementById("resetbtn")
// Get all the buttons to an Array
buttons = document.getElementsByClassName("btn")
// Add click event listener to all button elements and insert their inner text as value to the text field
Array.prototype.forEach.call (buttons, (button) => {
button.addEventListener("click", () => {
textField.value += button.innerText
})
})
// Add click event listener to reset button
resetButton.addEventListener("click", () => {
textField.value = null
})
}
document.addEventListener("DOMContentLoaded", ready);
input, button {
padding: 3px 6px;
margin: 3px;
}
<button class="btn">0</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<br>
<input type="text" id="field"><button id="resetbtn">Reset</button>
Follow the code to it:
Add function setNumber to set number in field text.
Change function showZero to resetNumber if contains the value in field text insert zero.
function resetNumber()
{
document.getElementById("field").value = '0';
}
function setNumber(number) {
document.getElementById("field").value = document.getElementById("field").value === '0' ? '' : document.getElementById("field").value += number;
}
<html>
<body>
<button onclick="resetNumber()">Reset</button>
<button onclick="setNumber(0)">0</button>
<button onclick="setNumber(1)">1</button>
<button onclick="setNumber(2)">2</button>
<button onclick="setNumber(3)">3</button>
<button onclick="setNumber(4)">4</button>
<button onclick="setNumber(5)">5</button>
<button onclick="setNumber(6)">6</button>
<button onclick="setNumber(7)">7</button>
<button onclick="setNumber(8)">8</button>
<button onclick="setNumber(9)">9</button>
<br />
<input type="text" id="field" />
</body>
</html>
I am attempting, with my very limited Javascript knowledge, to write vanilla Javascript to some buttons to achieve the following:
a) Click any button, e.g. button1 and its content is displayed
b) Click the same button and its content is hidden
c) Click a button again (e.g. button1) and then click another button (e.g. button2) and button2 content is displayed whilst also closing the previously clicked button (button1).
However, I can only achieve two out of those three steps:
For example, I have three buttons:
Scenario 1
In Scenario 1 I can achieve a) but not b) or c)
I can click button1 to show its content and then click button2 to open its content and hide the content of button1. What I can't do is then click button2 again to hide its content so the content of all buttons is hidden again.
As per this snippet:
let Buttons = document.querySelectorAll(".button");
for (let button of Buttons) {
button.addEventListener('click', (e) => {
const et = e.target;
const active = document.querySelector(".clicked");
if (active) {
active.classList.remove("clicked");
active.classList.add("not-clicked");
active.nextElementSibling.classList.toggle("hidden");
}
et.classList.toggle("clicked");
et.classList.toggle("not-clicked");
et.nextElementSibling.classList.toggle("hidden");
});
}
.hidden {
display: none;
]
<div>
<button class="button not-clicked" type="button" >Button 1</button>
<p class="level-1 hidden" data-number="2">Content of button 1</p>
</div>
<div>
<button class="button not-clicked" type="button" >Button 2</button>
<p class="level-1 hidden">Content of button 2</p>
</div>
<div>
<button class="button not-clicked" type="button" >Button 3</button>
<p class="level-1 hidden">Content of button 3</p>
</div>
Scenario 2
In Scenario 2 I can achieve a) and b) but not c)
In the following snippet, I can get each button to show and hide its own content when clicking it once to show and clicking the same button again to hide, but when clicking another button, when the first is still open, the first one doesn't hide:
document.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.type==="button") {
const level = tgt.className.replace(/[^\d]/g,"");
[...document.querySelectorAll('ul.level-'+level)].forEach(ul => ul.classList.add("hidden"));
const show = tgt.classList.contains("button")
tgt.nextElementSibling.classList.toggle("hidden",!show);
tgt.classList.toggle("button",!show);
}
})
.hidden {
display: none;
}
<div>
<button class="button not-clicked" type="button" >Button 1</button>
<p class="level-1 hidden" data-number="2">Content of button 1</p>
</div>
<div>
<button class="button not-clicked" type="button" >Button 2</button>
<p class="level-1 hidden">Content of button 2</p>
</div>
<div>
<button class="button not-clicked" type="button" >Button 3</button>
<p class="level-1 hidden">Content of button 3</p>
</div>
Ideal Scenario 3:
As explained at the beginning, what I'm trying to achieve is a combination of both Scenarios 1 and 2:
a) Click any button, e.g. button1 and its content is displayed
b) Click the same button again and its content is hidden
c) Click a button again (e.g. button1) and then click another button (e.g. button2) and button2 content is displayed whilst also closing the previously clicked button (button1).
I've tried fiddling my JS like below, but I think I'm either getting a double-negative or a double-positive - possibly 'clicked' is always true? - or my use of != is invalid (or both).
let Buttons = document.querySelectorAll(".button");
for (let button of Buttons) {
button.addEventListener('click', (e) => {
const x = e.target;
const y = document.querySelector(".clicked"); // this could include x
const z = (y != x); // I'm looking for "include y but not if it is x"
const q = (x = y); // If the target x already contains "clicked"
if (z) {
z.classList.remove("clicked");
}
if (q) {
q.classList.toggle("clicked"); // if x contains 'clicked', this will remove 'clicked'; if x does not contain 'clicked' move onto the default next line.
}
x.classList.toggle("clicked");
})
}
Any help, gratefully received, but no jQuery, thanks.
You can do something like this:
const buttons = Array.from(document.querySelectorAll(".button"));
buttons.forEach((button) => {
button.addEventListener('click', () => {
// Set to not clicked and hide the content of all the other buttons
buttons.filter(b => b != button).forEach(b => {
b.classList.remove('clicked');
b.classList.add('not-clicked');
b.nextElementSibling.classList.add('hidden')
});
// Set to clicked/not-clicked and show/hide the content of the current button
button.nextElementSibling.classList.toggle('hidden');
if (button.nextElementSibling.classList.contains('hidden')) {
button.classList.remove('clicked');
button.classList.add('not-clicked');
} else {
button.classList.add('clicked');
button.classList.remove('not-clicked');
}
});
});
.hidden {
display: none;
}
.clicked {
color: red;
}
<div>
<button class="button not-clicked" type="button">Button 1</button>
<p class="level-1 hidden" data-number="2">Content of button 1</p>
</div>
<div>
<button class="button not-clicked" type="button">Button 2</button>
<p class="level-1 hidden">Content of button 2</p>
</div>
<div>
<button class="button not-clicked" type="button">Button 3</button>
<p class="level-1 hidden">Content of button 3</p>
</div>
What this does, when a button is clicked, buttons.filter(b => b != button) creates an array of all the other buttons, sets them to not-clicked and hides their content. Then, the current button is set to clicked and its content's hidden class is toggled.
I am looking for some assistance and there must be a better way to code this. I have a series of buttons that change the same span Id and well I can get it to work but it seems like an excessive number of actions. Is there a way to make this more efficient? Any help would be appreciated. Thank you!
jQuery("#All-Btn").click(function(event) {
event.preventDefault();
jQuery('#Type').html("red wine");
});
jQuery("#Awesome-Btn").click(function(event) {
event.preventDefault();
jQuery('#Type').html("Awesome");
});
You can use a custom function:
function myBtn(id, text) {
$(id).click(function (e) {
e.preventDefault();
$('#Type').html(text);
})
}
myBtn("#All-Btn", "red wine");
myBtn("#Awesome-Btn", "Awesome");
Well, provided you gave all your buttons a shared class and a data element you could reduce the logic as such.
<input type="button" id="All-Btn" class="typeButton" data-type="red wine">
<input type="button" id="Awesome-Btn" class="typeButton" data-type="some other value">
jQuery('.typeButton').on('click', function(e){
e.preventDefault();
jQuery('#Type').html(jQuery(this).data('type'));
}
Common Approach is using data attributes
$("[data-test]").on("click", function () {
var text = $(this).data("test");
$("#out").text(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-test="Red">Button 1</button>
<button data-test="Blue">Button 2</button>
<button data-test="Green">Button 3</button>
<div id="out"></div>
Another approach is a lookup
var text = {
btn1 : "Red",
btn2 : "Green",
btn3 : "Blue",
};
$(".btn").on("click", function () {
var id = $(this).attr("id");
$("#out").text(text[id]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
<div id="out"></div>
Or a switch
$(".btn").on("click", function () {
var id = $(this).attr("id"),
text;
switch (id) {
case "btn1" :
text = "Red";
break;
case "btn2" :
text = "Green";
break;
case "btn3" :
text = "Blue";
break;
}
$("#out").text(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
<div id="out"></div>
You could make object, with key-value pairs: Key is button id, value is span html, e.g:
buttons={
'All-Btn':'red wine',
'Awesome-Btn':'Awesome'
};
And then iterate through it:
$.each( buttons, function( key, value ) {
jQuery("#"+key).click(function(event) {
event.preventDefault();
jQuery('#Type').html(value);
});
});
buttons={
'All-Btn':'red wine',
'Awesome-Btn':'Awesome'
};
$.each( buttons, function( key, value ) {
jQuery("#"+key).click(function(event) {
event.preventDefault();
jQuery('#Type').html(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="All-Btn">
fffff
</div>
<div id="Awesome-Btn">
fffffffffff
</div>
<span id="Type"></span>
However, you have to type... a lot, again. :)
You can store the text that you want to display as an attribute of the button (ex data-text). Then, you just need one function to handle the event
jQuery("#All-Btn, #Awesome-Btn").click(function(event) {
event.preventDefault();
var text = jQuery(this).data('text');
jQuery('#Type').html(text);
});
How about that?
The first way that came to mind was to use a data- attribute to specify the text associated with each button, and then bind a single, delegated click handler to handle clicks on all buttons with that attribute.
Notice that then your buttons don't need IDs.
$("body").on("click", "[data-text]", function() {
$("#type").text($(this).attr("data-text"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="type"> </span><br>
<button data-text="Awesome">Awesome</button>
<button data-text="Whatever">Something</button>
<button data-text="Greetings">Hello</button>
<button data-text="Fare well">Goodbye</button>
<button>This button does nothing because it has no data- attribute</button>
(I've bound the delegated click handler to the body, but the best practice is to bind it to the closest common parent of the elements in question.)
My events are not binding to dynamically created elements until that element has been clicked. So, the page loads, I can click the button and nothing happens, the second time I click the button it works.
Example code:
$(function() {
$("#resultsTable").on("click", ".confirm", function(){
$(this).confirm({
text: "Are you sure you want to delete this entry?",
title: "Confirmation Required",
confirm: function(button) {
//do nothing
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes I am",
cancelButton: "No",
confirmButtonClass: "btn-danger",
cancelButtonClass: "btn-default",
});
});
});
This is using jquery.confirm here: https://myclabs.github.io/jquery.confirm/
If I just do:
$("#resultsTable").on("click", ".confirm", function(){
alert("Did Stuff");
});
The alert pops up. What do I need to do for the first piece of code to get it to work on the first click?
Edit: Here is my template that I create the elements with:
<script id="buttonsTemplate" type="text/x-jquery-tmpl">
<div class="col-md-6">
<button type="button" id="enterInPTPButton" class="btn btn-primary" style="border-radius: 0; margin-left:10px; border-color:#3C5B75;">Entered In PTP</button>
<button type="button" id="deleteEntryButton" class="btn btn-warning confirm" style="border-radius: 0; margin-left:10px;">Delete Entry</button>
<button type="button" id="offboardedButtons" class="btn btn-info" style="border-radius: 0; margin-left:10px; border-color:#3A7B8E;">Offboarded</button>
</div>
</script>
What do I need to do to attach the plugin to the deleteEntryButton each time I use the template?
I am trying to change the class of a button when another button is clicked. I am able to change css on the page but have been unable to change btn-primary to btn-default.
Button:
<button type="button" class="btn btn-primary btn-circle" id="circle-1">1</button>
View:
events: {
"click #activate-step-2" : "newParent"
},
newParent: function(event) {
$('#step-1').css({'display':'none'});
$('#step-2').css({'display':'initial'});
}
I have tryed:
$(event.target).find('button').toggleClass('btn-primary btn-default')
But it didnt work,
so i'm not sure what else to try ?
$("#circle-1").removeClass("btn-primary").addClass("btn-default");