MyBB Forumunuzdaki Takvimi Açılır/Kapanır Yapmak [Ders]

[Nevedia and #NinjassK]

Bu konuda ana sayfadaki takvim linkini biraz daha geliştirmeye çalışacağız. Aşağıdaki kodlar sayesinde takvimi direkt olarak açılır/kapanır hale getirebilir ve sayfa geçişi olmadan aylık takvime bakabilirsiniz.
 Ekran Görüntüsü:


Yapacağımız işlemler uzun değil. Her ihtimale kodlarınızın yedeklerini almayı unutmayın.

Öncelikle Admin KP => Şablonlar => Kullandığınız Tema => Header (Üst Kısım) => header_menu_calendar şablonunu açın ve tamamını aşağıdaki kodlar ile değiştirin. Kaydedip kapatın.


Kod:

Kod: Tümünü Seç Tümünü Kopyala

<li class="takvimackapaWrapper"><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar} &#x21b4;</a><div class="takvimackapa"></div></li>

Headerinclude (Gruplandırılmamış) Şablonlar => headerinclude şablonunu açın ve en alta aşağıdaki kodları ekleyin. Kaydedip kapatın.


Kod:

Kod: Tümünü Seç Tümünü Kopyala

<script type="text/javascript">
$(document).ready(function() {
   $.get('calendar.php', function (response) {
       var source = $(response);
       $('.takvimackapa').html(source.find('table').wrap('<p/>').parent().html()).find('td.tcat strong').each(function() {
           var firstLetter = $(this).html().replace(/(\S)(\S*)/g, '$1');
           $(this).html(firstLetter);
       });
   });
   $('.takvimackapaWrapper > a').on('click', function(e) {
       e.preventDefault();
       $('.takvimackapa').slideToggle();
   });
});
</script>

Son olarak; Temalar => Kullandığınız tema => global.css => Gelişmiş düzenleme 'ye girin ve en alta aşağıdaki kodları ekleyin. Kaydedip kapatın ve forumunuzu yenileyin.


Kod:

Kod: Tümünü Seç Tümünü Kopyala

.takvimackapaWrapper {

    position: relative;
}

.takvimackapa {
    position: absolute;
    width: 300px;
    right: 0;
    top: 100%;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    display: none;
    margin-top: 15px;
}

#header ul.menu li .takvimackapa a {
    background: transparent;
    padding: 0;
}

.takvimackapa td {
    height: auto !important;
    vertical-align: middle !important;
    text-align: center;
}

.takvimackapa td .float_right {
    float: none;
}

.takvimackapa td.trow1 {
    opacity: .5;
}

  Takvim sayfasının tamamına ulaşmak için açılan panelden herhangi bir linke basmanız yeterli. (Ay/gün/hafta seçimi linkleri) Kolay gelsin.