开发者

How do I change an event's background color with different colors, in fullcalendar?

开发者 https://www.devze.com 2023-02-26 05:33 出处:网络
I\'m using the last version of fullcalendar, I looked on documentation how change background color event, but I don\'t know how make to different events.

I'm using the last version of fullcalendar, I looked on documentation how change background color event, but I don't know how make to different events.

I need for code sample with events red, blue, green, like the following picture:

How do I change an event's background color with different colors, in fullcalendar?

I see this code, on document site, but I can't to apply 2 colors:

$('#calendar').fullCalendar({
  editable: true,
  events: [{
    title: 'Teste1',
    start: new Date(y, m, d, 10, 30),
    allDay: false,
    editable: false
  }, {
    ti开发者_运维知识库tle: 'Teste2',
    start: new Date(y, m, d, 11, 40),
    allDay: false
  }],
  eventColor: '#378006'
});


Since you are using the latest version (1.5), you can set the backgroundColor property.

{
  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor'
},
{
  title: 'Teste2',
  start: new Date(y, m, d, 11, 40),
  allDay: false,
  backgroundColor: '#SomeOtherColor'
}   

You can also set the textColor property if you need to change that as well.


Use css and the className property.

<style>
.event {
    //shared event css
}

.greenEvent {
    background-color:#00FF00;
}

.redEvent {
    background-color:#FF0000;
}
</style>

<script>
$('#calendar').fullCalendar({
      editable: true,             events: [
          {
              title: 'Teste1',
              start: new Date(y, m, d, 10, 30),
              allDay: false,
                editable: false,
              className: ["event", "greenEvent"]
          },
          {
              title: 'Teste2',
              start: new Date(y, m, d, 11, 40),
              allDay: false,
              className: ["event", "redEvent"]
          }           ], eventColor: '#378006'        });
</script>


I have applied the color code like this for each event, It works for me.

 $.each(data, function(i, v){    
    var event =[];     
    var col = "";           
                            if(v.Status == 1)      
                            {  
                                col = "#00c0ef";  
                            }  
                            else if(v.Status == 2){  
                                col = "#dd4b39";  
                            }     
                            else if (v.Status === 3)  
                            {    
                                col = "#f39c12";   
                            }       
                            else {   
                                col = "#00a65a";  
                            }    
                         event.push({   
                             title: v.AssignedName + "\n  Installation Date: \n" + da,    
                             start: da,    
                             backgroundColor: col,    
                                textColor:'black'       
                         })   
});             


eventContent: function(arg) {                            
  var sln = arg.event.title.substring(0, 1);          
  switch(sln) {
    case '1':
      arg.backgroundColor='#198754';
      break;
    case '2':
      arg.backgroundColor='#adb5bd';            
      break;
    case '3':
      arg.backgroundColor='#ffc107';            
      break;
    case '4':
      arg.backgroundColor='#6f42c1';            
      break;
    default:
      //
  }
}
0

精彩评论

暂无评论...
验证码 换一张
取 消