I'm trying to make a website with php, mysql & fullcalendar jquery plugin where I want to show some datas of corresponding date from mysql table in the calendar but nothing is showing. Here is my js codes,
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicDay'
},
defaultDate: '2015-04-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
<?php while ($row=mysql_fetch_array($result)) { ?>
{
title: '<?php $row[1] ?>', //'This is today!',
start: '<?php $row[0] ?>' //'2015-04-12'
},
<?php } ?>
{
title: 'It was yesterday!',
start: '2015-04-11'
}
]
});
});
Is there something wrong in my code? How can I fetch data and pass it to jquery? Need this help badly! Tnx.
Add an "echo" before $row[x]. You need to do:
echo $row[1]; inside the php tags
Related
Like everyone else I also have problem when displaying event in fullcalendar.
Below is my controller for JSON data:
function schedule($id) {
$data = $this->M_care->getSchedule($id);
echo json_encode($data);
exit;
}
This controller produce JSON data like that:
[{"id":"51","title":"test date","start":"2022-03-31T00:00:00-05:00","end":"2022-03-31T00:00:00-05:00"},{"id":"53","title":"test date","start":"2022-03-29T00:00:00-05:00","end":"2022-03-29T00:00:00-05:00"}]
and below is script for render calendar:
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'id';
var calendarEl = document.getElementById('calendar');
var url = '<?= base_url('service/Care/schedule/').$id; ?>';
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
validRange: function(nowDate) {
return {
start: nowDate
};
},
eventSources: [
{
url: url,
color: 'red',
textColor: 'black',
display: 'background'
}
]
});
calendar.render();
});
The $id in the url variable get from $id = $this->session->userdata('event');
Above code is not working for displaying events data. I have trying to solve this for several days, and search related question but none of them fix this issue.
I am trying to get some CSS containing PHP on jQuery.
I basically need this CSS:
background: #3c653c url( <?php echo $cta_background_image_url; ?> ) no-repeat fixed;
Applied to:
wp.customize( 'cta_background_image', function( value ) {
var styles = {
backgroundPosition : "center top",
backgroundBlendMode: "hard-light",
position: "relative",
height: "440px",
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
backgroundSize: "cover",
lineHeight: "200%",
color: "#fff",
overflow: "hidden",
paddingTop: "0",
marginBottom: "0"
};
value.bind( function( to ) {
$( '.cta-parallax-section ' ).css( 'background', 'url( ' + to + ')' );
$( '.cta-parallax-section ' ).css( styles );
} );
});
I need too inject the code where it says css( 'background', 'url( ' + to + ')' );
This code will be applied to a WordPress Customizer to make it render changes made by the user in real time within the preview window.
How can I achieve this? I can't find information online on this kind of maneuver.
Thanks in advance!
To get the value from the variable $cta_background_image_url; you can simply set a timeout and retrieve the value from the element, which you can use for whatever you want.
For example:
setTimeout(function() {
var data = $("background").css("background-image");
}, 50);
The variable data would output url( [ value from $cta_background_image_url ] ).
To inject it, simply use the variable data:
$( '.cta-parallax-section ' ).css( 'background', data );
You can put some vars in head with this code:
add_action('wp_head', function(){
?>
<script type='text/javascript'>
var bg_img = '<?php echo $bg_img; ?>';
</script>
<?php
});
And use bg_img var in your js code. But better way is using wp_localize_script function.
How to stop all jwplayers in page. my goal is only one jwplayer play at time, container id is dynamic and unique.
i want to like this.
$('All_dynamic_player_container_ids').stop();$('dynamic_player_container_id').play();
Jwplayer code is bellow
<?php while(list($display_name, $iId, $uid, $caption, $dt, $post_type, $ext,$blocked_user,$special,$stream_id, $comments, $likes, $userLiked , $exclusive) = mysql_fetch_array($result))
{ ?>
<div class="post_image video_image<?php echo $iId ?>" id="video_image<?php echo $iId ?>"></div>
<?php
echo '<script type="text/javascript">
jwplayer("video_image'.$iId.'").setup({
sources: [{
file: "../vids/user/'.$uid.'-'.$iId.'.mp4",
},],
image:"../imgs/user/'.$uid.'-'.$iId.'.jpg",
logo: {
file: "../images/logo/melogo.png",
link: "http://'.SERVER.'",
hide:true
},
modes: [{
type: "html5"
}],
width: "100%",
aspectratio: "16:9",
autostart: false,
});
jwplayer("video_image'.$iId.'").onError ( function(event) {
setTimeout(function()
{
jwplayer("player").play(true);
},2000);
}
);
</script>';
} ?>
in JavaScript you can:
var myPlayers = $('.post_image div');
var numPlayers = myPlayers.length;
for (i=0;i<numPlayers;i++) {
//this for loop will stop all the videos from playing
jwplayer("'video_image'+i").stop();
}
//then you can play the video you want to play here
Sorry, my php is not great. Hopefully this will help you.
I am trying to implement full calendar js plugin but the events default to the first hour on the callendar that is from 12 a.m to 1 a.m .
Below is my code :
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: {
url: '<?php echo base_url(); ?>appointments/get_appointmentss',
error: function () {
$('#script-warning').show();
}
},
// Convert the allDay from string to boolean
eventRender: function (event) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
loading: function (bool) {
$('#loading').toggle(bool);
}
});
});
</script>
The returned value in json encode is below :
[{"title":"Rabbi Less Brown Motivation","allDay":"false","start":"2015-06-17 14:00:00","end":"2015-06-17 15:00:00"},{"title":"Miss Mary Wochete Sinaida","allDay":"false","start":"2015-06-02 14:15:30","end":"2015-06-02 14:30:25"},{"title":"Lt Col Robirt Sharma Monk","allDay":"false","start":"2015-06-18 08:00:00","end":"2015-06-18 09:00:00"}]
The start and end day are saved on mysql data type datetime .
What am I not doing right for the information to display within the stipulated time ?
EDIT:: My brain's smoking :) Perhaps I'm looking at this from the wrong angle? We need the JQuery to initialise for each dynamically generated id. Do we have to run the JQuery for each and every id (ie. place it in our PHP loop)??
How can we make this JQuery script apply to a dynamically generated list of ids where the ids increase by 1 when looped with PHP?
Here's the JQuery:
$(document).ready(function(){
$('#slider').unoslider({
scale: 'true',
responsive: 'true',
touch: 'true',
preset: 'bar_fade_left',
navigation: {autohide: true},
slideshow: {speed: 5, timer: false},
animation: {delay: 200}
});
});
And here the dynamically generated ids:
<?php echo "<ul id="slider'.$counter.'" class="unoslider">";?>
Thanks for any help!!
I created a simple plugin which lets me initialize elements based on data-* attributes:
<?php echo "<ul data-jquery-bind='unoslider' ".
"data-jquery-options='" . htmlspecialchars(json_encode($unoSliderOptions), ENT_QUOTES) . "'>;"?>
Here is the plugin:
$.fn.jqueryBind = function() {
return (this.length ? this : $('body')).each(function() {
var $root = $(this);
$root.find('[data-jquery-bind]').each(function() {
var jqueryFn = $(this).attr('data-jquery-bind');
var options = $(this).attr('data-jquery-options');
if (options) {
options = $.parseJSON(options);
}
$(this)[jqueryFn](options);
});
});
};
Then add:
$(function() {
$.jqueryBind();
});
And it will automatically search for elements with the attribute data-jquery-bind and initialize the plugin using the json serialized options in data-jquery-options.
You can use this selector -
$('ul[id^="slider"].unoslider')