使用JavaScript在全日历上显示/隐藏事件

Question

我正在为一个项目制作宗教日历，该项目显示所有主要宗教的不同事件。 我使用的是完整日历，并且在日历的顶部有一个“宗教钥匙”，因此我要使其保留，以便在单击“犹太人”时将其隐藏在日历上的所有宗教活动/节日与犹太信仰无关的东西。 我有麻烦了 我的想法是，我将在CSS中将“ .fc-event”类设置为display：none，然后有一个名为.show的类，该类将为display：block。当用户单击该类时，切换该类/删除该类。与假期有关的菜单项，是否有更好/更轻松的方法来完成此操作？需要一些指导/提示/帮助:)谢谢。

这是我的日历js代码（显然是使用补全日期）：

events: [
        {
            title: 'xmas',
            start: '2017-03-19',
            className: 'catholic show',
            description: 'blablablablabla'
        },
        {
            title: 'Hanukkah',
            start: '2017-03-19',
            className: 'jewish show',
            description: 'blablablabla'
        },
        {
            title: 'Hindu Holiday',
            start: '2017-03-24',
            end: '2017-03-27',
            className: 'hindu show',
            description: 'blablablabla'
        }
    ]
});

$('.calendar-nav a').each(function() {

    $(this).on('click', function(e) {
        e.preventDefault();

        var x = $(this).attr('rel');

        $('.fc-event-container').each(function() {

            $(this).removeClass('show');

            if($(this).hasClass(x)) {

                $(this).addClass('show');
            }
        });
    })
});

$('.show-all a').on('click', function() {
    $('.fc-event-container').each(function() {
        if(!$(this).hasClass('show')) {
            $(this).toggleClass('show');
        }
    });
});
});

日历和日历键的php代码：

<nav class="calendar-nav">
<ul class="menu">
    <li class="christianity-text"><a href="#" rel="christian">><img src="/images/calendar/christianity.png" />CHRISTIAN</a>
        <ul class="sub-menu">
            <li><a href="#">Catholic</a></li>
            <li><a href="#">Protestant</a></li>
            <li><a href="#">Coptic</a></li>
            <li><a href="#">Mormon</a></li>
            <li><a href="#">Neo</a></li>
            <li><a href="#">Anglican</a></li>
            <li><a href="#">Celtic</a></li>
            <li><a href="#">Jehova's Witness</a></li>
        </ul>
    </li>
    <li class="buddhist-text"><a  href="#" rel="buddhist"><img src="/images/calendar/buddhism.png" />BUDDHIST</a></li>
    <li class="hindu-text"><a  href="#" rel="hindu"><img src="/images/calendar/hindu.png" />HINDU</a></li>
    <li class="jewish-text"><a  href="#" rel="jewish"><img src="/images/calendar/jewish.png" />JEWISH</a></li>
    <li class="islam-text"><a  href="#" rel="islam"><img src="/images/calendar/islam.png" />ISLAM</a></li>
    <li class="sikh-text"><a  href="#" rel="sikh"><img src="/images/calendar/sikh.png" />SIKH</a></li>

    <li class="pagan-text"><a  href="#" rel="pagan"><img src="/images/calendar/pagan.png" />PAGAN</a></li>
    <li class="wiccan-text"><a  href="#" rel="wiccan"><img src="/images/calendar/wiccan.png" />WICCAN</a></li>
    <li class="other-text"><a  href="#" rel="other"><img src="/images/calendar/other.png" />OTHER</a></li>
    <li class="all-text"><a href="#" rel="all">ALL</a></li>
</ul>
</nav>

<div id='calendar'></div>

Answer 1

您可以执行以下操作

---

答：您可以添加/删除具有display:none和display:block

$(this).addClass('hideClass'); 和$(this).addClass('showClass');

CSS

hideClass
{ display:none; }

showClass
{ display:block; }

---

B.您可以切换隐藏和显示

$(this).hide(); 和$(this).show();

---

C.您可以使用css变量来更改css属性本身。 这是一个更好的选择，尤其是当您异步重绘元素时。.使用CSS保留更改。

请注意，chrome不支持此功能，这导致我们...

---

D.附加CSS文件以覆盖类

你可以添加.css文件与上课!important覆盖您当前的设置

$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");

这是为了确保如果异步重绘页面，该属性将保留。

Answer 2

认为使用CSS和少量JS可以更轻松地管理这种事情。 下面的示例是一种最小用例版本，但是想法是相同的。

 /* Listen for clicks on the nav. Use each <a>'s "data-show" property to determine which class to add to the #calendar. That class, along with the CSS will determine which to show (hide, actually). By default, all events are shown. Only when the #calendar element gets a class associated with our CSS does anything change. Since we're using the :not() selector to _hide_ everything else (instead of showing something specific) there's no need for any 'show all'. Once #calendar has 'show-all', the default CSS comes through. */ $('.calendar-nav').on('click', 'a', function(evt) { var showType = $(this).data('show'); var $calendar = $('#calendar'); if(showType !== undefined) { $calendar.attr('class', '').attr('class', 'show-' + showType); } }); 

 .show-hindu li:not(.hindu), .show-pagan li:not(.pagan) /* ... continue ... */ { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="calendar-nav"> <a href="#" data-show="hindu">Hindu</a> <a href="#" data-show="pagan">Pagan</a> <a href="#" data-show="all">All</a> </nav> <div id="calendar"> <ul class="events"> <li class="hindu">Hindu 1</li> <li class="pagan">Pagan 1</li> <li class="hindu">Hindu 2</li> <li class="pagan">Pagan 2</li> <li class="hindu">Hindu 3</li> <li class="pagan">Pagan 3</li> </ul> </div> 

Answer 3

另一种解决方案是向事件添加自定义属性“宗教”并将其保存到数据库。 从具有您要显示的宗教信仰的数据库中获取事件：

JavaScript的：

...
$.ajax({
        url: 'process.php',
        type: 'POST',
        data: 'religion=1",
        async: false,
        success: function(response){
            json_events = response;

        }
});
$(#calendar).fullCalendar({
    events: JSON.parse(JSON.stringify(json_events)),

});     

process.php

$religion = $_POST['religion'];
$query = "SELECT * FROM calendar WHERE religion='$religion'";
...

Answer 4

我想给你一个建议！ 我更喜欢使用javascript逻辑。您拥有事件对象，因此您可以重新创建需要数据的对象

$(document).ready(function(){
var events = [
    {
        title: 'xmas',
        start: '2017-03-19',
        className: 'catholic show',
        description: 'blablablablabla'
    },
    {
        title: 'Hanukkah',
        start: '2017-03-19',
        className: 'jewish show',
        description: 'blablablabla'
    },
    {
        title: 'Hindu Holiday',
        start: '2017-03-24',
        end: '2017-03-27',
        className: 'hindu show',
        description: 'blablablabla'
    }
];
//init calendar 
$("#calendar").fullCalendar({
  events : events
});

$('.calendar-nav a').click(function(e) {    
        e.preventDefault();    
        var x = $(this).attr('rel');
        //if all, shows original events object
        if(x == "all") {
          newEvent = events;
        } else{
        var newEvent = checkEvent(x,events); //recreate object function
        }
        $('#calendar').fullCalendar('destroy');
        $("#calendar").fullCalendar({
          events : newEvent
        });
});
});

function checkEvent(x,events) {  
  var newEvent = [];
  for(var i in events) {
    var key = events[i].className.split(" ")[0];
    if(key == x) { //check same religious name
      newEvent.push(events[i]);
    }
  }
  return newEvent;
}