2017-11-10 9 views
0

사람들이 클릭하여 다른 날을 예약 할 수있는 칼레도어를 만들고 있습니다. 달력에 추가값을 확인하는 방법 fullCalendar에서 하루 동안 이미 존재

이벤트 데이터는 다음과 같습니다

var myEvent = { 
    user_id: 2345, 
    title: 'this is a title', 
    allDay: true, 
    start: date.format(), 
    end: date.format() 
}; 

자사가 추가 된 내가 USER_ID 그래서 사용자가 존재 다시 이벤트를 추가 해달라고하면 확인하고자합니다.

나는 dayClick 이벤트를 사용하고 있는데 코드는 다음과 같습니다

dayClick: function(date, jsEvent, view) { 

    var myEvent = { 
     user_id: userid, 
     title: title, 
     allDay: true, 
     start: date.format(), 
     end: date.format() 
    }; 

    var allEvents = allEvents = $('.calendar').fullCalendar('clientEvents'); 

    $.each(allEvents, function(index, value){ 

     //add event if not exist 
     if(value.user_id != userid){ 
      $('.calendar').fullCalendar('renderEvent', myEvent); 
     } 
    }); 

} 

이 이벤트가 값이 추가해도 그래도 추가 솔기. 이 작업을 수행하는 더 나은/쉬운 방법이 있습니까?

답변

1

논리가 잘못되었습니다. 사용자 ID와 일치하지 않는 각 이벤트에 대해 새 이벤트를 작성합니다. 캘린더에 10 개의 이벤트가 있다면 동일한 이벤트를 10 번 만들 것입니다.

var userid = 1; 
 
var title = "Test Event"; 
 

 
$(document).ready(function() { 
 
    // page is now ready, initialize the calendar... 
 

 
    $(".calendar").fullCalendar({ 
 
    dayClick: function(date, jsEvent, view) { 
 
     var myEvent = { 
 
     user_id: userid, 
 
     title: title, 
 
     allDay: true, 
 
     start: date.format(), 
 
     end: date.format() /* vs HH:MM:SS */, 
 
     stick: true 
 
     }; 
 

 
     var allEvents = $(".calendar").fullCalendar("clientEvents"); 
 

 
     var exists = false; 
 
     $.each(allEvents, function(index, value) { 
 
     if (value.user_id === userid && new Date(value.start).toDateString() === new Date(date).toDateString()) { 
 
      exists = true; 
 
     } 
 
     }); 
 

 
     if (!exists) { 
 
     $(".calendar").fullCalendar("renderEvent", myEvent); 
 
     } 
 
    }, 
 
    defaultView: "month", //Possible Values: month, basicWeek, basicDay, agendaWeek, agendaDay 
 
    header: { 
 
     left: "title", 
 
     center: "", 
 
     right: "today prevYear,prev,next,nextYear" //Possible Values: month, basicWeek, basicDay, agendaWeek, agendaDay, today prevYear,prev,next,nextYear 
 
    }, 
 
    buttonIcons: { 
 
     prev: "left-single-arrow", 
 
     next: "right-single-arrow", 
 
     prevYear: "left-double-arrow", 
 
     nextYear: "right-double-arrow" 
 
    } 
 
    }); 
 
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="calendar"></div> 
 
    </div> 
 
</div>

+0

사용자가 원하는만큼 며칠을 선택할 수 있지만 1 일로 제한하려면 시스템에 둘 이상의 사용자가 있으므로 같은 날 다른 user_ids를 등록 할 수 있어야합니다. – sdfgg45

+0

이 경우에는 'if (value.user_id === userid)'를 취하여 조건을'if (value.user_id === userid && value.start === date.format()) '로 변경하십시오. 그 트릭을 할 것입니다. – achelo

+0

테스트되었지만 원하는만큼 항목을 추가 할 수 있습니다. – sdfgg45

1

는뿐만 아니라 이벤트가 추가되고, 그러나 당신이있는 경우, 예를 들어, 20 개 다른 이벤트 사용자 ID는 다음 추가하고, 새로운 이벤트의 사용자 ID와 동일하지 않는 경우 이벤트 20 회.

루프를 사용하여 다른 이벤트 중 하나 이상에서 사용자 ID를 찾았는지 여부를 나타내는 플래그를 설정 한 다음 모두 검색을 마친 후에 다음 중 하나를 수행할지 여부를 결정해야합니다. 해당 플래그의 상태에 따라 이벤트를 추가하거나 추가하지 마십시오.

dayClick: function(date, jsEvent, view) { 

    var myEvent = { 
    user_id: userid, 
    title: title, 
    allDay: true, 
    start: date.format(), 
    end: date.format() 
    }; 

    var allEvents = allEvents = $('.calendar').fullCalendar('clientEvents'); 
    var foundUser = false; //flag is false until we find a matching user ID 

    $.each(allEvents, function(index, value) { 

    if (value.user_id == userid) { 
     foundUser = true; //set the flag true 
     return false; //job done, so break out of the .each loop 
    } 
    }); 

    //now we've searched through everything, we can make a final decision 
    if (foundUser == false) { 
    $('.calendar').fullCalendar('renderEvent', myEvent); 
    } 
} 

N.B. "clientEvents"를 사용하여 이벤트를 검색하는 것을 제외하고는 fullCalendar에만 해당되는 것이 없다는 것을 이해할 가치가 있습니다. 나머지는 목록의 값을 찾는 올바른 논리를 적용하는 것인데, 이는 모든 상황에 적용될 수 있습니다.