2012-12-17 2 views
3

FullCalendar 구성 요소를 사용 중이고 주말 인 금요일 & 토요일을 색칠해야합니다. 여기 권장 내가 사용한 다음 Can I set a different color for the weekend on monthly fullCalendar displayFullcalendar의 주말 색색

$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend'); 

은 나뿐만 아니라 CSS 클래스를 추가했다.

다음은 주말을 장식하지 않는 코드입니다. 어떤 조언을 해주세요!

$(document).ready(function() { 
    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 
    $.getJSON('[@spring.url '/loadSomeData'/]', function (data) { 
     $.getJSON('[@spring.url '/loadOtherData/]', function (info) { 
     information = returnedPublicVacation; 

     var calendar = $('#calendar').fullCalendar({ 
      header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
      }, 
      selectable: true, 
      selectHelper: true, 
      select: 
      function(start, end, allDay) { 
       vacationStart = start; 
       showTheCorrectDialog(vacationStart); 
      }, 

      eventClick: function(calEvent, jsEvent, view) { 

      showTheCorrectDialog(calEvent.start); 

      // change the border color just for fun 
      $(this).css('border-color', 'red'); 
      }, 

      editable: true, 
      events:data.concat(information) 
     }); 
     resourceVacation = data; 
     }); 
    }); 

    $('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend'); 
    }); 

답변

18

CSS 파일의 클래스에 스타일을 추가 했습니까?

또한이 시도 할 수 있습니다 :

.fc-fri { color:blue; } 
.fc-sat { color:red; } 

(또는 일요일 .fc-일) 는 여기에서 예를 볼 수 있습니다 http://jsfiddle.net/rajesh13yadav/nf9whojL/1/

+1

"fc-weekend"에 대한 내 css 클래스를 제거 했으므로 추가했습니다. 그것은 전체 세포가 아니라 번호를 채색합니다! – Echo

+0

나는 다음을 사용했다 : .fc-fri {color : blue; background-color : blue} – Echo

+0

하지만 어떻게 작동합니까 !! ... JQuery 줄을 제거한 및 잘 작동하고 셀 색이 : $ ('table.calendar> tbody> tr> td : nth 자식 (-n + 2)'.) addClass ('fc-weekend '); ... 어떻게 아십니까? – Echo

2
AJS.$(document).ready(function() { 
    AJS.$(".fc-weekend-column").each(function(i,el){ 
     AJS.$(this).css("background-color", "#FFF7F7"); 
    }); 
}); 
0

이 나를 위해 일한 :

.fc-sun { 
color:#337ab7; 
border-color: black; 
background-color: #ffa58c; } 
관련 문제