v2.5.2
Giriş yap

fullcallendar tıkladığım günde popup çıkartmak

burhanccan
364 defa görüntülendi
1

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?

javascript jquery
Cevap yaz
Cevaplar (1)
webdevyusuf
1483 gün önce

Ö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 / &times;</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...

0
#002188