0

I want to change fullcalendar's selected cell css via jQuery with an !important tag, I wanna do this without specifying the element id and only the class name:

This doesn't work:

$('.fc-cell-overlay').css('height', '40px !important');

Thoughts?

UPDATE

I think this is more complicated than what I was asking. Sorry if I wasn't detailed enough. I want to do it in jQuery cos I want to dynamically change the height value of a cell in full calendar if let's say I'm doing a per 60min duration (height should be 40px) instead of a per 30min duration (height should be 20px) while disabling the dragging capability. This is a hack I found here: How to disable the drag in FullCalendar but keep the ability to click on a time slot and have the "placeholder" appointment still render.

I can't change the css as per @climbinghobo's advice since the css doesn't exist yet if you do not click the cell. Apparently full calendar doesn't have this functionality yet so I had to work around through it.

Community
  • 1
  • 1
superigno
  • 994
  • 2
  • 12
  • 24

2 Answers2

2

JQuery doesn't understand "!important". You have a few options:

  • add a class with this rule and add this class to your element:
    css: .important-rule{ height: 40px !important; }
    js: $('.fc-cell-overlay').addClass('important-rule')

  • add a rule to the head of your document:
    js: $("<style type='text/css'> .fc-cell-overlay{ height: 40px !important; } </style>").appendTo("head");

  • use the workaround code in the link provided by @Shaunak D, to "familiarize" JQuery with !important

As a side note, I would try and avoid !important as much as possible. See if you can provide more specificity with your selector instead. Note that, as Suresh Ponnukalai wrote, inline rules generated by JQuery will override any css rules, without using !important.

Alon Dahari
  • 1,138
  • 1
  • 9
  • 27
  • Thank you for this. I have a problem though, in the fullcalendar the '.fc-cell-overlay' won't exist initially unless you click a cell on which this won't work. I want to do it in jQuery cos I want to dynamically change the height value if let's say I'm doing a per 60min (height should be 40px) instead of a per 30min (height should be 20px) duration in Full Calendar. I found the hack of changing the height here: http://stackoverflow.com/questions/4903140/how-to-disable-the-drag-in-fullcalendar-but-keep-the-ability-to-click-on-a-time#comment5587639_4988945 – superigno Jul 07 '14 at 07:22
  • Well then the second option I suggested would still work... – Alon Dahari Jul 07 '14 at 08:55
  • Honestly overlooked that one out. I'll give it a go and update you thanks – superigno Jul 07 '14 at 10:24
  • Well what do you know, worked like a charm! Thanks a bunch @climbinghobo! – superigno Jul 07 '14 at 10:27
0

May be you could do:

  $('.fc-cell-overlay').attr('style','height:40px');

It will override css since its inline style.

Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
guramidev
  • 2,228
  • 1
  • 15
  • 19