Jquery 事件的完整日历字体大小
当我更改css中的Jquery 事件的完整日历字体大小,jquery,css,fullcalendar,Jquery,Css,Fullcalendar,当我更改css中的字体大小时，如下所示： .fc-event { font-size: .85em;} 字体大小看起来很完美 但是当我用jquery更改字体大小时，它不起作用 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $('#calendar').fullCalendar('changeView', 'agendaDay');
字体大小时，如下所示：
.fc-event {
font-size: .85em;}
字体大小
看起来很完美
但是当我用jquery更改字体大小时，它不起作用
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>
$（文档）.ready（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
//var username=$（“输入#用户名”）.val（）；
//var password=$（“输入密码”）.val（）；
var username='api_user'；//api gebruikersnaam
var password='api_pass'；//api passwoord
函数make_base_auth（用户、密码）{
var tok=用户+'：'+密码；
var hash=btoa（tok）；
返回“基本”+散列；
};
var calendar=$（“#calendar”）.fullCalendar({
//显示设置
//主题：真的，
//方面：1，//总体而言，标准为dit 1.35
标题：{
左：“上一个，下一个，今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaThreeDay，agendaDay”//Ok Mogelik basicWeek，basicDay
},
第一天：1，//星期天=0，星期一=1，星期二=2，以此类推。
//隐藏日期：[0]，//zondag verbergen[1,3,5]//隐藏星期一、星期三和星期五
周数：对，
营业时间：{
开始：“7:00”，//开始时间
结束：“19:00”，//结束时间
道琼斯指数：[1,2,3,4,5,6]
//周天数。一个以零为基础的周天数整数数组（0=星期日）
//（本例中为周一至周六）
},
观点：{
agendaFourDay：{
键入：“议程”，
持续时间：{天：4}，
按钮文字：“4达根”
},
agendaThreeDay：{
键入：“议程”，
持续时间：{天：3}，
按钮文字：“3达根”
}
},
defaultView:'agendaWeek'，//日历开放标准操作编辑月，agendaWeek，agendaThreeDay，agendaDay
timeFormat:'H（：mm）//24小时时钟的大写字母H
朗：“nl”，
//日历设置
是的，
selectHelper:对，
是的，
eventLimit:true，//当事件太多时允许“更多”链接
//事件
活动：{
url:'events.php'，
错误：函数（）{
警报（“获取事件时出错！请检查事件设置、数据库连接和events.php”）；
},
//颜色：“绿色”，
},
eventRender:函数（事件，元素）{
$（'.fc event'）.css（'font-size'，'1.85em'）；
//qtip（{content:event.title}）；
},
//事件单击时弹出
eventClick:函数（calEvent、jsEvent、view）{
警报（'AFSPRAK详细信息：\n'+calEvent.title+'\n'+'\n'
+'Plaats:'+calEvent.location+'\n'+'\n'
+'Omschrijving:'+calEvent.description+'\n'+'\n'
//+'Van:'+calEvent.startgethours（）>12？+'\n'+'\n'
);
//警报（“视图：”+视图名称）；
//更改边框颜色只是为了好玩
//$（this.css（'background-color'，'deepskyblue'）；//更改所选项目的颜色
},
//将全天从字符串转换为布尔值
eventRender:函数（事件、元素、视图）{
如果（event.allDay=='true'）
{
event.allDay=true；
}
否则{
event.allDay=false；
}
},
/*
eventRender:函数（事件，元素）{
元素qtip({
内容：event.title
});
},
*/
//添加事件=>alle velden toevoegen voor gebruikt kan worden
/*
选择：功能（开始、结束、全天）{
var title=prompt（'事件标题：'）；
//var url=prompt（'Type Event url，如果退出：'）；
如果（标题）{
var start=$.fullCalendar.moment（start）.format（“YYYY-MM-
$('.fc-event').css('font-size', '1.85em');
$('.fc-title').css('font-size', '1.85em');
$('.fc-time').css('font-size', '1.85em');
$('.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');
$('.fc-event').attr('style', 'font-size: 1.85em !important');
.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;
}
<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>