当我在css中更改font-size时，如下所示：
.fc-event {
font-size: .85em;}
font-size看起来很完美。
但是当我用jquery更改font-size时，它不起作用。
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('#calendar').fullCalendar('changeView', 'agendaDay'); //=> OK
$(".fc table ").css("font-size", "1.40em"); //=> OK
$('.fc-event').css('font-size', '1.85em !important'); //=> NOT OK
$('#calendar').fullCalendar('option', 'aspectRatio', 0.85); //=> OK
};
其他CSS设置确实发生了更改。但线路$('.fc-event').css('font-size', '1.85em !important');没有。
更新：这是我使用的所有代码：
<?php
session_start();
if(!$_SESSION['email'])
{
header("Location: login.php");//redirect to login page to secure the welcome page without login access.
}
?>
<html>
<head>
<meta charset='utf-8' />
<link href='css/jquery.qtip.css' rel='stylesheet' />
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/lib/jquery-ui.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/fullcalendar.js'></script>
<script src='js/lang-all.js'></script>
<script src='js/jquery.qtip.js'></script>
<script src='js/bootstrap.js'></script>
<script src='js/bootstrap.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
//var username = $("input#username").val();
//var password = $("input#password").val();
var username = 'api_user'; //api gebruikersnaam
var password = 'api_pass'; //api passwoord
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = btoa(tok);
return "Basic " + hash;
};
var calendar = $('#calendar').fullCalendar({
//Display settings
//theme: true,
//aspectRatio: 1, // verhouding hoogte breedte standaard is dit 1.35
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaThreeDay,agendaDay' //ook mogelijk basicWeek, basicDay
},
firstDay: 1, //Sunday=0, Monday=1, Tuesday=2, etc.
//hiddenDays: [ 0 ], //zondag verbergen [ 1, 3, 5 ] // hide Mondays, Wednesdays, and Fridays
weekNumbers: true,
businessHours: {
start: '7:00', // a start time
end: '19:00', // an end time
dow: [ 1, 2, 3, 4, 5, 6 ]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-saturday in this example)
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 Dagen'
},
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 dagen'
}
},
defaultView: 'agendaWeek', //de calender opent standaard op dit overzicht month,agendaWeek,agendaThreeDay,agendaDay
timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
lang: 'nl',
//Calendar settings
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true, //allow "more" link when too many events
//Events
events: {
url:'events.php',
error: function() {
alert('There was an error while fetching events! Check event settings, database connection and events.php');
},
//color : 'green',
},
eventRender: function(event, element) {
$('.fc-event').css('font-size', '1.85em');
//element.qtip({content: event.title});
},
//Popup on event click
eventClick: function(calEvent, jsEvent, view) {
alert('Afspraak details: n' + calEvent.title + 'n' + 'n'
+ 'Plaats: ' + calEvent.location + 'n' + 'n'
+ 'Omschrijving :' + calEvent.description + 'n' + 'n'
//+ 'Van :' + calEvent.startgethours()>12? + 'n' + 'n'
);
//alert('View: ' + view.name);
// change the border color just for fun
//$(this).css('background-color', 'deepskyblue'); //change color of selected item
},
//Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true')
{
event.allDay = true;
}
else {
event.allDay = false;
}
},
/*
eventRender: function(event, element) {
element.qtip({
content: event.title
});
},
*/
//Add event => alle velden toevoegen voor gebruikt kan worden
/*
select: function(start, end, allDay) {
var title = prompt('Event Title:');
//var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.moment(start).format("YYYY-MM-DD HH:mm:ss");
var end = $.fullCalendar.moment(end).format("YYYY-MM-DD HH:mm:ss");
$.ajax({
url: 'http://www.data2info.be/_test/kalender/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('De afspraak is toegevoegd');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
//allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
$.ajax({
url: 'navapi.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "GET",
//datatype: "json",
statusCode: {404: function() {alert( "navapi.php niet gevonden. De wijziging wordt niet opgeslagen." )}},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', make_base_auth(username, password));
},
});
},
*/
//Move event
eventDrop: function(event, delta, revertFunc) {
var start = event.start.format("YYYY-MM-DD HH:mm:ss");
var end = event.end.format("YYYY-MM-DD HH:mm:ss");
//Post changes - drag/drop event
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) { //refresh calendar on success
$('#calendar').fullCalendar( 'refetchEvents' );
//alert("Updated Successfully");
},
error: function(json) { //refresh calendar on error
$('#calendar').fullCalendar( 'refetchEvents' );
},
statusCode: {404: function() {alert( "update_events.php niet gevonden. De wijziging wordt niet opgeslagen." )}},
});
//Post parameters tot api NAV
$.ajax({
url: 'navapi.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "GET",
//datatype: "json",
statusCode: {404: function() {alert( "navapi.php niet gevonden. De wijziging wordt niet opgeslagen." )}},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', make_base_auth(username, password));
},
});
},
//Resize event
eventResize: function(event) {
var start = event.start.format("YYYY-MM-DD HH:mm:ss");
var end = event.end.format("YYYY-MM-DD HH:mm:ss");
//Post changes - resize event
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) { //refresh calendar on success
$('#calendar').fullCalendar( 'refetchEvents' );
//alert("Updated Successfully");
},
error: function(json) { //refresh calendar on error
$('#calendar').fullCalendar( 'refetchEvents' );
//alert("Updated Successfully");
},
statusCode: {404: function() {alert( "update_events.php niet gevonden. De wijziging wordt niet opgeslagen." )}},
});
//Post parameters tot api NAV
$.ajax({
url: 'navapi.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "GET",
//datatype: "json",
statusCode: {404: function() {alert( "navapi.php niet gevonden. De wijziging wordt niet opgeslagen." )}},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', make_base_auth(username, password));
},
});
},
}); //hier stopt the full cal
$(".fc-time-grid-event fc-event fc-start fc-end fc-draggable fc-resizable").css("font-size", "2em");
$(".fc-event-container").css("font-size", "2em");
// afhankelijk van het gebruikte device
/*
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('#calendar').fullCalendar('changeView', 'agendaDay');
$('#calendar').fullCalendar('option', 'aspectRatio', 0.85); //aanpassing aspect ratio
//$("h1").css("color", "rgb(224, 68, 80)"); //debug info verander kleur van titel
//$(".fc-centre ").css("font-size", "1.40em");
//$('body .fc ').css('font-size', '3em');
//$('.fc-event-content, .fc-event-time').css('font-size', '1.85em');
$(".fc-event").css("font-size", "2em");
};
*/
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3><a href="logout.php">Logout here</a> </h3>
<?php
//echo "DEBUG INFO <br>";
//echo $_SESSION['email']." dit is een email van de ingelogde gebruiker <br>";
//echo $_SESSION['resource']." = resource ID <br>";
?>
<div id='Header'>
<h1><?php echo "welkom " . $_SESSION['name']?></h1><br>
</div>
<div id='calendar'></div>
</body>
</html>
有人能看出我做错了什么吗？
问候，
Tim
您必须在没有!important:的情况下应用css规则
$('.fc-event').css('font-size', '1.85em');
您可以尝试设置字体大小的另一种方法是这些类（v2.x）：
$('.fc-title').css('font-size', '1.85em');
$('.fc-time').css('font-size', '1.85em');
对于1.x版本，您需要使用以下类：
$('.fc-event-content, .fc-event-time').css('font-size', '1.85em');
请确保在您的完整日历配置之后应用此功能！
$('#calendar').fullcalendar({...});
$('.fc-event-content, .fc-event-time, .fc-event-title').css('font-size', '1.85em');
参见示例：http://jsfiddle.net/3ra5x1Lu/2/
在fullcalendar.css文件中，找到.fc事件并编辑字体大小：
.fc-event {
border: 1px solid #3a87ad; /* default BORDER color */
background-color: #3a87ad; /* default BACKGROUND color */
color: #fff; /* default TEXT color */
font-size: 1em; /* EDIT HERE */
cursor: default;
}
如果需要!important规则，请尝试使用.attr()方法而不是.css()。像这样：
$('.fc-event').attr('style', 'font-size: 1.85em !important');
您可以尝试使用Chrome中的开发工具（Ctrl+Shift+C）检查事件的类。然后单击事件文本，您可以看到事件在哪个类中。然后相应地使用jQuery选择器。我使用fullcalendar的v1，它显示类为"fc事件内部"。
您可以将此样式标记添加到页面中
<style>
.fc-event {
font-size: 16px !important; //Your font size
}
.fc-day-grid-event .fc-content {
white-space: normal !important;//to make event block more than a line
overflow: hidden !important;
}
</style>
@fullCalendar v5.9.0
使用.fc-time, .fc-title { font-size: 1em; font-weight: normal;}
如果无法在css中直接访问.fc-time和.fc-title，请使用影子主机:host >>> .fc-time和:host >>> .fc-title