事件的全日历字体大小 [英] Fullcalendar font-size of events
本文介绍了事件的全日历字体大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我像这样更改css中的font-size时:
When I change the font-size in the css like this:
.fc-event {
font-size: .85em;}
font-size看起来很完美.
但是当我用jquery更改font-size时，它不起作用.
But when I change the font-size with jquery it does not work.
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');行没有.
Other CSS settings do get changed. But the line $('.fc-event').css('font-size', '1.85em !important'); does not.
更新:这是我使用的所有代码:
UPDATE: This is all the code i used:
<?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>
有人可以看到我做错了吗?
Can someone see what I do wrong?
亲切的问候，
蒂姆
推荐答案
在fullcalendar.css文件中，找到.fc事件并编辑字体大小:
In the fullcalendar.css file, find the .fc-event and edit the font size:
.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;
}
这篇关于事件的全日历字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
