I've a div with id PopUpDiv and following code only show dialog which is not so pleasant. I want to Show different buttons in that dialogs, Save and Cancel button in footer and title in that Header.
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
I have tried this one . But it's not working as well
$.Dialog({
shadow: true,
overlay: false,
icon: '',
title: 'Title',
width: 500,
padding: 10,
content: 'Window content here',
draggable: true,
sysButtons: {
btnMin: true,
btnMax: true,
btnClose: true
},
sysBtnCloseClick: function (e) {
},
sysBtnMinClick: function (e) {
},
sysBtnMaxClick: function (e) {
}
})
Related
I've been working with the FullCalendar configuration for a little bit now but I've reached a point that I just can't get figured out. I want to enable to tooltips to appear when the end user hovers over the event. I would like to give a little further information in the tooltip for the event, such as a phone contact number, etc.
I've tried a number of different options that I was able to find.
The list of links below for example.
FullCalendar event popup
http://jsfiddle.net/m54g5aen/
Fullcalendar / eventdidmount - issue with "more link"
I'll pulling in my events via a JSON array from a PHP script.
Here is my Calendar rendering code.
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 550,
slotDuration: {minutes: 15},
nowIndicator: true,
allDaySlot: false,
eventBackgroundColor: '#916FDF',
slotMinTime: "08:00:00",
slotMaxTime: "20:00:00",
displayEventEnd: false,
initialView: 'timeGridWeek',
events: <?php print json_encode($events); ?>,
eventDidMount: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
customButtons: {
addNewAppointment: {
text: 'New Appt',
click: function() {
window.location.href="../client/newAppointment.php";
}
}
},
headerToolbar: {
left: 'title',
center: 'dayGridMonth timeGridWeek',
right: 'prev next today addNewAppointment'
}
});
calendar.render();
});
</script>
My PHP to pull the events is as follows:
<?php
require_once('../db_connect.php');
// Check to see if the session is already started.
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
$query = 'SELECT
CONCAT(client.cl_fName, " ", client.cl_lName) AS "title",
CONCAT(appointment.sched_date,"T", appointment.start_time) AS "start",
CONCAT(appointment.sched_date,"T", appointment.end_time) AS "end",
CONCAT("TEST", " DESCRIPTION") AS "description"
FROM
appointment, client
WHERE appointment.client_id = client.client_id';
$statement = $db1->prepare($query);
$statement->execute();
$events = $statement->fetchAll();
$statement->closeCursor();
?>
I appreciate all suggestions. Thank you in advance.
Try using a popover instead of a tooltip, it's better than a tooltip if you wanna add more info to it.
change youreventDidMount to
eventDidMount: function (info) {
$(info.el).popover({
title: info.event.title,
placement: 'top',
trigger: 'hover',
content: 'more info on the popover if you want',
container: 'body'
});
}
How can I show a description of Events in fullcalendar?
I have events that have a title and a description.
So how can I show the description?
When you add the title and description it will concatenate.
Using the below code, you can concatenate with the title:
eventRender: function (event, element, view) {
element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">' + event.description + '</span></div>');
},
Here is the working jQuery or JavaScript code.
I love Bootbox.js for showing message so I implemented that also here:
$(document).ready(function() {
var today_date = moment().format('YYYY-MM-DD');
console.log(today_date);
// $('#calendar').fullCalendar('gotoDate', today_date);
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
// right: 'month,basicWeek,basicDay'
},
// header: { center: 'month,agendaWeek' }, // Buttons for switching between views
defaultDate: today_date,
businessHours:
{
rendering: 'inverse-background',
dow: [0,1]
},
editable: false,
eventLimit: true, // Allow "more" link when too many events
events: myevents,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
bootbox.alert({
message: 'Description : '+event.description,
title: event.title,
});
});
}
});
});
When I open my modal and it has great content, and its height is large, is opening on top of my footer, how do you not open up in the footer but make my content (body of the page) to automatically increase?
see below:
$('#lnkAdicionar').live("click", function () {
$('#dialogClienteFornecedor').dialog({
width: 608,
resizable: false,
title: 'Novo Cliente e Fornecedor',
modal: true,
draggable: false,
open: function (event, ui) {
$.ajax({
url: '#Url.Action("CadastroClienteFornecedor")',
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).html(result);
},
});
},
close: function (event, ui) {
$('#dialogClienteFornecedor').empty();
},
position: {
my: 'top',
at: 'top',
of: $('#divMenu')
}
});
});
});
I currently am using Adam Shaw's jQuery Calendar 'FullCalendar' and am experiencing significant delays in the calendar rendering. In short, the page appears, 1 second passes, the Calendar pops in, another second passes, and then the events populate the page, here. Is there a way to only fetch a certain number of events behind and before today's date? Or even loading the calendar immediately would be an improvement. I am also using Craig Thompson's qTip2.
Javascript
<script type=text/javascript>
// Setup FullCalendar
jQuery(document).ready
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
},
},
events: {
render: function(event, api) {
var elem = api.elements.bgiframe;
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'event',
viewport: $(window),
adjust: {
mouse: false,
scroll: true,
method: 'shift',
resize: true
}
},
show: {
modal: {
on: false,
blur: true,
stealfocus: false
}
},
hide: false,
style: 'qtip-bootstrap'
}).qtip('api');
$('#fullcalendar').fullCalendar({
eventSources: ["https://www.google.com/calendar/feeds/emailaddresshere/public/basic",
"http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"],
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
selectable: true,
eventClick: function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: true,
eventDragStart: false,
viewDisplay: function() { tooltip.hide() }
});
}());
</script>
I want the icon on right side of textfield , What i am trying is i wrap the textbox and that wrapper has relative position and then to this wrap i append a div with absolute position and then set the class to it to show the icon. My question is the icon with the absolute position shouldn't it sit within the relative positioned wrapper. I see the wrapper and icon div outside of the textfield table in the HTML tab of firebug after it is rendered. My code with the screen shot is as below.
<style type="text/css">
.icon {
background-image: url("../Content/images/not_documented.png");
cursor: pointer;
height: 16px;
width: 16px;
}
</style>
<script type="text/javascript">
Ext.onReady(function () {
//define a new custom text field
Ext.define('WithStatusTextField', {
extend: 'Ext.form.field.Text',
alias: 'widget.withStatusTextField',
iconCls: 'icon ',
fieldStyle: {
textTransform: "uppercase"
},
initComponent: function () {
this.callParent(arguments);
},
afterRender: function () {
if (this.iconCls) {
var iconCls = this.iconCls;
//delete this.iconCls;
this.setIconCls(iconCls);
}
this.callParent(arguments);
},
renderIconEl: function () {
if (!this.wrap) {
this.wrap = this.el.wrap({ cls: "x-form-field-wrap" });
this.positionEl = this.wrap;
}
this.wrap.applyStyles({ position: "relative" });
this.icon = Ext.DomHelper.append(this.el.up("div.x-form-field-wrap") || this.wrap,
{
tag: "div",
style: "position:absolute"
}, true)
if (!this.width) {
this.wrap.setWidth(this.el.getWidth() + 50);
}
this.icon.on("click", function (e, t) {
this.fireEvent("iconclick", this, e, t);
}, this);
},
setIconCls: function (iconCls) {
if (this.iconCls) {
this.renderIconEl();
}
this.iconCls = iconCls;
this.icon.dom.className = iconCls;
//this.icon.alignTo(this.el, 'tl-tr', [2, 0]);
},
listeners: {
change: function (obj, newValue) {
console.log(newValue);
obj.setRawValue(newValue.toUpperCase());
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
height: 150,
// The fields
defaultType: 'withStatusTextField',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
when i put the debug point in firebug at the point where the class for the div that show the icon is set it shows the icon properly next to the textfield the screenshot of which is but after the complete render the icon sits somewhere else.
Wrap on textfield with icon class afterRender - the visual display of icon after the icon class is set.
Wrap on textfield with icon class - this.wrap.dom.outerHtml
dom Structure - after the complete render the div icon class with field wrap class goes outside the textfield div.