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.

Improve this question
2

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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: stackoverflow.com/questions/4903140/…
Well then the second option I suggested would still work...
Honestly overlooked that one out. I'll give it a go and update you thanks
Well what do you know, worked like a charm! Thanks a bunch @climbinghobo!
0

May be you could do:

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

It will override css since its inline style.

Improve this answer

6 Comments

i guess you expect "why?"
beacause the OP ask overide that height property only. your answer will overide all the property in that style attribute.Thanks
he can do $(this) and it will override only clicked one
it's not come under any event handler.
Yea, but it could be the case, not clear. Plus class '.fc-cell-overlay' he is referring to may be the class of only selected elements(would be logical), in that case this script works too.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.