Full Calendar scheduler increasing height of event bars in timeline - css

I've been using Full Calendar Scheduler for a while now in order to create a calendar for a client, except the "events" are just job allocation times.
I've styled up the calendar itself to suit the client, but the actual event bars that appear on the calendar after the data has been fed through are only about half the height of the actual time slot. I'm aware that this is likely to be for the purpose of overlapping events in general, but this will never happen in this case, so is there a way of increasing the height of the event bar to 100% of the time slot? I've tried in the CSS but it never works.
This is in timeline view, for a week, going horizontally rather than vertically. I have attached a screenshot as an example.
EDIT: Code for calendar
JS:
$('#calendar').fullCalendar({
resourceAreaWidth: "20%",
editable: true,
aspectRatio: 2.5,
scrollTime: '08:00',
minTime: '08:00',
maxTime: '22:00',
firstDay: 1,
header: {
left: 'promptResource today prev,next',
center: 'title',
right: 'timelineDay,timelineWeek,timelineMonth'
},
customButtons: {
},
defaultView: 'timelineWeek',
views: {
timelineWeek: {
type: 'timeline',
slotWidth: 60,
slotDuration: '02:00',
duration: { days: 6 }
}
},
slotLabelFormat: [
'dddd D/M/YY',
'h:mma'
],
events: [
{ id: '1', resourceId: '1', start: '2016-10-24 08:00:00', end: '2016-10-24 10:00:00', title: 'TESTREF001', url: 'null' },
],
resourceLabelText: 'Staff',
resources: [
{ id: '1', title: 'John Doe' },
]
});
CSS:
.fc-widget-header > .fc-cell-content > .fc-cell-text {
font-family: 'Oswald', sans-serif;
font-weight: 400 !important;
padding-top: 12px;
}
.fc-widget-header > .fc-cell-content {
background: #e4dbff;
}
.fc-time-area .fc-widget-header {
background: #e4dbff !important;
text-align: center !important;
}
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td {
border-color: #AAA !important;
}
.fc-body .fc-resource-area .fc-cell-content, .fc-body .fc-resource-area .fc-widget-content > div {
background: #f9f2c7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}
.fc-widget-header > div > .fc-cell-content > .fc-cell-text {
font-family: 'Oswald', sans-serif;
font-weight: 400 !important;
font-size: 24px;
padding-top: 12px;
}
.fc-widget-header {
background: #f9f2c7;
}
.fc-widget-content.fc-major {
background: #fff2e7;
border-collapse: collapse;
}
.fc-resource-area .fc-scroller-canvas {
background: #f9f2c7;
}

Related

Fullcalendar nowIndicator sits at midnight, unless calendar is started with resourceTimelineDay

When I try to initialize a calendar with anything other than resourceTimelineDay, the nowIndicator doesn't show up in the right place. If I start it with resourceTimelineMonth, it sticks at midnight. If I start it with resourceTimelineWeek, it sticks at the beginning of the hour. If I start it with resourceTimelineDay though, it starts with the correct time, and holds, even if I change the view to week or month view.
I would like to start with month view, and have the nowIndicator show where it is supposed to. This used to work with V3, but now, with V5, it isn't working.
Here is it started with resourceTimelineMonth:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
initialView: 'resourceTimelineMonth',
aspectRatio: 1.5,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Rooms',
resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>
Here it is started with resourceTimelineDay:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
initialView: 'resourceTimelineDay',
aspectRatio: 1.5,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Rooms',
resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>
Neither resourceTimelineWeek, nor resourceTimelineMonth work as expected, even if you switch to day view.
This is not how it should be done, in my opinion, but it appears there is no official way to change the behavior of the nowIndicator. In lieu of that, the hack is to start in resourceTimelineDay view and change the view to resourceTimelineWeek or resourceTimelineMonth view immediately after the calendar is rendered.
calendar.render();
calendar.changeView('resourceTimelineMonth');
This is a hack, and hopefully there will be a fix for this in some future release.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
initialView: 'resourceTimelineDay',
aspectRatio: 1.5,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Rooms',
resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
});
calendar.render();
calendar.changeView('resourceTimelineMonth');
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

Vertically aligning text in a table's cell

I have an event limit link inside a day cell for a full calendar and I'm trying to vertically align it in CSS.
Here is a link to my js fiddle here
It looks like fullcalendar wraps a div around the anchor tag that is the eventLimit link, that ideally would be the best element to vertically align but I don't know if I can access it in CSS. Maybe I can in fullcalendar somehow with eventRender??
Can this be done easily in CSS or is there a better way to do itusing some way in full calendar?
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 1,
eventLimitText: function (numEvents) {
return numEvents;
},
events: [
{
title: 'Event',
start: '2017-09-18'
},
{
title: 'Event',
start: '2017-09-18'
}
]
});
});
You need to set your table height to match the height of its container
Try updating your CSS to this:
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
vertical-align: middle
}
.fc-content-skeleton,
table,
tr {
height: 100%;
}
Here you go with. check the JS Fiddle
http://jsfiddle.net/rbynbu4z/1/
I added the below code
.fc-row .fc-content-skeleton,
.fc-row .fc-content-skeleton td,
.fc-row .fc-content-skeleton table,
.fc-row .fc-content-skeleton tr{
height: 100%;
vertical-align: middle;
}
.fc-row .fc-content-skeleton td div {
display: inline-block;
line-height: 100%;
}
Use line height for the anchor, it will vertically align the text inside the cell.
here is the fiddle;
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
}
td.fc-more-cell a{
line-height:85px;
}

Ext Js show a text above a button element

We are trying to develop a progress bar in which we have to align a text on top of button. We tried using different layouts but its not coming. Can some suggest a way to do it using CSS if possible. Attaching the example here.
CSS should solve your problem, this is a bit hard-coded and won't work as a generic solution but you can start from here:
First let's create a panel with progress bars and a button between them:
Ext.create('Ext.panel.Panel', {
renderTo: document.body,
height: 100,
layout: {
type: 'hbox',
align: 'middle'
},
defaults: {
margin: 2
},
items: [{
xtype: 'progressbar',
style: {
borderRadius: '5px'
},
height: 10,
width: 200,
text: ' ',
value: 1
}, {
xtype: 'container',
cls: 'btnWrapper',
items: [{
xtype: 'button',
height: 30,
cls: 'fa fa-check',
style: {
color: 'white'
}
}]
}, {
xtype: 'progressbar',
style: {
borderRadius: '5px'
},
height: 10,
text: ' ',
width: 200
}]
});
And here is the CSS to take care of the rest:
<style>
.btnWrapper:before {
content: 'BASICS';
font-weight: bold;
position: absolute;
top: -20px;
left: -10px;
width: 100%;
color: orange;
text-align: center;
}
.btnWrapper .x-btn {
border-radius: 30px;
}
</style>
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/21n5

extjs shrink area between displayfields (labels and values)

how do I shrink the area between these displayfields?
I've tried moving padding... margins... nothing seems to work. When I do end up getting the labels the way they should look (with very little space)... then the values are not aligned next to the label correctly.
this is how I have it setup.
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
//defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [
{
xtype: 'displayfield',
fieldLabel: 'Client',
bind: {
value: '{selectedClientListModel.ClientName}'
},
fieldStyle: 'color: #ff0000; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; padding: 0px; margin: -5px;'
//ui: 'dark'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Desc',
itemId: 'textfieldAcctDesc',
bind: {
value: '{selectedManager.AcctShortCode}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -15px;'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Num',
itemId: 'textfieldAcctNum',
bind: {
value: '{selectedManager.AcctNum}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -5px;'
}
]
}, {
displayfields are intended to align neatly with other form fields - which have spacious borders around their input fields. For that reason, displayfields have the same height, they even haven't got a different SCSS variable for displayfield height.
Furthermore, from the CSS classes available, the fieldLabel cannot distinguish between being a displayfield's label and another field's label. Because of that, you will have to give your displayfield at least a custom userCls, or else all your regular form fields will look ridiculous.
Then you can go and add some CSS like this:
.myUserCls,
.myUserCls .x-form-item-label,
.myUserCls .x-form-display-field
{
line-height:16px;
min-height:16px;
margin-bottom:0;
margin-top:0;
padding-top:0;
}
I have made you a fiddle.

How can I bring the tooltip to the top of chart

I now have a google chart like this bellow picture
Now I want to move the tooltip to the top of chart (dont care the position of my mouse).
How can I do it.
Here is my code :
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Time');
chartData.addColumn('number', 'Average Score');
chartData.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
chartData.addRows(data);
var options = {
chartArea: { left: 0, top: 100, width: "100%", height: "100%" },
title: '',
opacity: 100,
backgroundColor : {fill: '#000'},
hAxis: {
textPosition: 'none',
titleTextStyle: {color: '#333'},
titleTextStyle: {color: '#2902A3'},
},
vAxis: {
textPosition: 'none',
opacity: 100,
minValue: 0,
gridlines: { color: '#0D2B56', count: 10 },
baselineColor: 'white',
},
series:{
0:{
color: '#3C93FF',
areaOpacity: '0.68'
}
},
crosshair: {
orientation: 'vertical',
trigger: 'focus',
color: '#fff'
},
legend: 'none',
tooltip: {isHtml: true},
};
google.load("visualization", "1", { packages: ["corechart"] });
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(chartData, options);
I also use this function to create tooltip's content
var createToolTip = function (name, value) {
return '<div class="googletooltip" ><span>' + name + ':</span><span style="padding-left:20px" >' + value + '</span></div>';
}
and this style also
.googletooltip{
color:#fff;
border-style: solid;
border-width: 2px;
border-color: #3882C4;
background: #000;
padding:2px 15px 2px 15px;
font-weight: bold;
}
Thank a lot
Try adding a top property and a position property for the .googletooltip class. If not, try using the margin property if the other properties are not working. Work around these three properties and see if you will be able to move tooltip up. Let me know if it still isn't working.
.googletooltip{
color:#fff;
border-style: solid;
border-width: 2px;
border-color: #3882C4;
background: #000;
padding:2px 15px 2px 15px;
font-weight: bold;
}
Where are you calling createToolTip function? Is it called while generating data chartData.addRows(data);?
Ref: check how createCustomHTMLContent function is used # https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Resources