fullcallendar tıkladığım günde popup çıkartmak
merhabalar fullcalendar ile bi takvim eklentisi oluşturdum ama bir güne tıkladığımda bir popup çıkartıp o gün için randevu eklemek istiyorum nasıl yapabilirim?
Öncelikle merhaba ben hiç fullcallendar kullanmadım ama sitesine baktığımda az çok ne olduğunu anladım.
Şimdi burada sana bir fonksiyon vericem ve bunun nasıl kullanıcağını göstericem şimdi sen hem
javascript'i hemde jquery'i eklemisin etiket olarak ben bu yüzden fonksiyonu javascript olarak vericem
sonra jquery'i nasıl yapıcağını göstericem.
Javascript fonksiyonu
let newModal = (mainModal,openButton,closeButton,toggleClass) => {
let modal = document.querySelector(mainModal);
let modalOpenButton = document.querySelector(openButton);
let modalCloseButton = document.querySelector(closeButton);
let hasClass = modal.classList.contains(toggleClass);
modalOpenButton.addEventListener("click", () => {
modal.classList.add(toggleClass);
});
modalCloseButton.addEventListener("click", () => {
modal.classList.remove(toggleClass);
});
window.addEventListener("keyup", (e) => {
if(e.code == "Escape" && hasClass === true){
modal.classList.remove(toggleClass);
}
});
};
Bu fonksiyon şu şekilde kullanıcaksın ilk modal'ı css ile düzenliyiceksin ondan sonra
modal active class'ı yokken gözükmiyecek sonra açma butonuna basıldığında active class'ı
atanacak sende active classı varsa modal'ı göster yapıcaksın css ile yapıcaksın bunları
Kullanımı:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Burada fonksiyon bulunan JS dosyasını çağırdan diye düşünüyorum -->
<!-- Burdada CSS ile modalı ayarladın sayıp işlemime geçiyorum -->
</head>
<body>
<button id="openButton">Open Modal</button>
<div id="modal">
<button id="closeButton">Close Modal / ×</button>
<!-- Bu içerik beni ilgilendirmez -->
</div>
<script>
newModal("#modal","#openButton","#closeButton","active");
</script>
</body>
</html>
İşlem bundan ibaret eğer jquery ile çalışıyorsanız
Jquery:
function newModal(mainModal,openButton,closeButton,toggleClass){
let modal = $(mainModal);
let modalOpenButton = $(openButton);
let modalCloseButton = $(closeButton);
let hasClass = modal.hasClass(toggleClass);
modalOpenButton.on("click", () => {
modal.addClass(toggleClass);
});
modalCloseButton.on("click", () => {
modal.removeClass(toggleClass);
});
window.on("keyup", (e) => {
if(e.code == "Escape" && hasClass === true){
modal.removeClass(toggleClass);
}
});
};
Eğer jquery ise fonksiyonu bu şekilde kullan diğer herşey aynı
Not: Fonksiyonlar bana aittir lütfen kendiniz yazmışsınız gibi kullanmayın...
İyi çalışmalar...