Full Calendar not displaying my events from my database - fullcalendar

The events from my database are not displayed on my Full Calendar. I used the codes from the examples that I've seen online so please bear with the codes that I have right now. I would appreciate all the help that I will get from you guys. Thanks!
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},editable: false,
events: "json_events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
json_events.php
<?php
include 'connect.php';
session_start();
$result = mysql_query("SELECT ID, title, startDate AS startDate FROM events");
mysql_close();
$events = array();
while ($row=mysql_fetch_array($result)){
$title = $row['title'];
$eventsArray['id'] = $row['ID'];
$eventsArray['title'] = $title;
$eventsArray['startDate'] = $row['startDate'];
$events[] = $eventsArray;
}
echo json_encode($events);
?>

<?php
include 'connect.php';
session_start();
$result = mysql_query("SELECT ID, title, startDate AS startDate FROM events");
mysql_close();
$events = array();
while ($row=mysql_fetch_array($result)){
$id = $row['ID'];
$title = $row['title'];
$start = $row['startDate'];
$events = array(
'id' => "$id",
'title' => "$title",
'start' => "$start"
);
}
echo json_encode($events);
?>
That should work for you. If you do not want the even to be all day just add 'allDay' => "" after the start statement.

Related

Add "insert button" on toolbar tinymce editor

I want to add an "insert button" on my toolbar tinymce editor.
An example of what I want :
An example of what I want
With the toolbar button, I would like to create a button in my editor and change its style. (Like the gutenberg editor does)
gutenberg editor
To use the tinymce editor, I have this code :
function wpc_boutons_tinymce($buttons) {
$buttons[] = 'underline';
$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'edit-block';
return $buttons;
}
add_filter("mce_buttons_3", "wpc_boutons_tinymce");
$content = '';
$editor_id = 'mycustomeditor';
$settings = array(
'wpautop' => false,
'media_buttons' => false,
'quicktags' => array(
'buttons' => 'strong,em,del,ul,ol,li,block,close'
),
);
wp_editor( $content, $editor_id, $settings );
I didn't find how to do, can you help me ?
Here is my implemented code Follow the step
Paste the code in your theme functions.php
add_action( 'init', 'wptuts_buttons' );
function wptuts_buttons() {
add_filter( "mce_external_plugins", "wptuts_add_buttons" );
add_filter( 'mce_buttons', 'wptuts_register_buttons' );
}
function wptuts_add_buttons( $plugin_array ) {
$plugin_array['wptuts'] = get_template_directory_uri() . '/wptuts-editor-buttons/wptuts-plugin.js';
return $plugin_array;
}
function wptuts_register_buttons( $buttons ) {
array_push( $buttons, 'dropcap', 'showrecent' ); // dropcap', 'recentposts
return $buttons;
}
require( 'wptuts-editor-buttons/wptuts.php' );
Create a folder in your theme root file named wptuts-editor-buttons
Then create a file in wptuts-editor-buttons named wptuts.php and paste the code
<?php
add_shortcode( 'recent-posts', 'wptuts_recent_posts' );
function wptuts_recent_posts( $atts ) {
extract( shortcode_atts( array(
'numbers' => '5',
), $atts ) );
$rposts = new WP_Query( array( 'posts_per_page' => $numbers, 'orderby' => 'date' ) );
if ( $rposts->have_posts() ) {
$html = '<h3>Recent Posts</h3><ul class="recent-posts">';
while( $rposts->have_posts() ) {
$rposts->the_post();
$html .= sprintf(
'<li>%s</li>',
get_permalink($rposts->post->ID),
get_the_title(),
get_the_title()
);
}
$html .= '</ul>';
}
wp_reset_query();
return $html;
}
Also, You need to create a js file in wptuts-editor-buttons > wptuts-plugin.js and paste the code
(function() {
tinymce.create('tinymce.plugins.Wptuts', {
init : function(ed, url) {
ed.addButton('dropcap', {
title : 'DropCap',
cmd : 'dropcap',
image : url + '/dropcap.jpg'
});
ed.addButton('showrecent', {
title : 'Add recent posts shortcode',
cmd : 'showrecent',
image : url + '/images.jpg'
});
ed.addCommand('dropcap', function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '<span class="dropcap">' + selected_text + '</span>';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand('showrecent', function() {
var number = prompt("How many posts you want to show ? "),
shortcode;
if (number !== null) {
number = parseInt(number);
if (number > 0 && number <= 20) {
shortcode = '[recent-post number="' + number + '"/]';
ed.execCommand('mceInsertContent', 0, shortcode);
}
else {
alert("The number value is invalid. It should be from 0 to 20.");
}
}
});
},
// ... Hidden code
});
// Register plugin
tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();
Whole the Solution I followed the article
https://code.tutsplus.com/tutorials/guide-to-creating-your-own-wordpress-editor-buttons--wp-30182

Isotope with wordpress filtering does not work

I check the other posts on this subject but I did not find the answer to my problem.
I follow this tutorial : https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/
But when I test and click on a filter, nothing happen... I return to the top of my website and that's it. Don't understand why
My js :
jQuery(function ($) {
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'fitRows'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
And my php :
<section>
<ul id="filters">
<li>Everything</li>
<?php
$terms = get_terms("category"); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
<?php $the_query = new WP_Query( 'posts_per_page=6' ); //Check the WP_Query docs to see how you can limit
// which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
global $post;
$termsArray = get_the_terms( $post->ID, "category" ); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
?>
<div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier ?>
<h3><?php the_title(); ?></h3>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php endif; ?>
</section>
thanks a lot for help
From the example i have provided to you - codepen.io/Igorxp5/pen/ojJLQE
This is single term filter so keep that in mind.
For multi term filter you can check this one -https://codepen.io/TimRizzo/details/ervrRq
First prepare your template and query
<section>
<ul class="filters">
<?php
$terms = get_terms("category");
if($terms):
echo '<li>All</li>';
foreach ( $terms as $term ):
echo '<li>'.$term->name.'</li>';
endforeach;
endif;
?>
</ul>
<?php
$the_query = new WP_Query( 'posts_per_page=-1' ); // We need all posts
if ( $the_query->have_posts() ) :
echo '<div id="container" class="isotope">';
while ( $the_query->have_posts() ) : $the_query->the_post();
$terms = get_the_terms( get_the_ID(),'category');
// Filter is working with single term so i am getting first from array or keep posts with single category/tag or w/e.
echo '<div class="grid-item" data-filter="'.$terms[0]->slug.'">'.get_the_title().'</div>';
endwhile;
endif;
?>
</section>
From there in your js file add the following
jQuery(function ($) {
$(document).ready( function() {
var itemSelector = '.grid-item'; // Item class change if needed
var $container = $('#container').isotope({ // change ID of container if needed
itemSelector: itemSelector,
masonry: {
columnWidth: itemSelector,
isFitWidth: true
}
});
// Responsive pagination
var responsiveIsotope = [
[480, 2], // Bellow 480px wide 2 items per page
[720, 4] //Below 720px wide 4 items per page
];
var itemsPerPageDefault = 6; // Items per page unless responsiveIsotope . Over 720px wide 6 items per page
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAtribute = 'data-filter'; //Used for the filter
var pageAtribute = 'data-page'; // Used for the pagination
var pagerClass = 'isotope-pager'; // Class of the pagination container
function changeFilter(selector) {
$container.isotope({
filter: selector
});
}
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
selector += '['+pageAtribute+'="'+currentPage+'"]';
changeFilter(selector);
}
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for( var i = 0; i < responsiveIsotope.length; i++ ) {
if( $(window).width() <= responsiveIsotope[i][0] ) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
$container.children(selector).each(function(){
if( item > itemsPerPage ) {
page++;
item = 1;
}
$(this).attr(pageAtribute, page);
item++;
});
currentNumberPages = page;
}();
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAtribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
$container.after($isotopePager);
}();
}
setPagination();
goToPage(1);
//When we click a filter grab value ,recalculate pagination, reset pagination
$('.filters a').click(function(){
var filter = $(this).attr(filterAtribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
// On resize triger responsive pagination
$(window).resize(function(){
itemsPerPage = defineItemsPerPage();
setPagination();
goToPage(1);
});
});
});

AJAX success response is not working but it's saving my changes

I'm a beginner in jQuery-Ajax so please bear with me. My Ajax response does not seem to load but my changes are being saved. but gives me this error on admin-ajax.php "call_user_func() expects parameter 1 to be a valid callback, function '_update_post_ter_count' not found or invalid function name".
Here is my function, could you point what i'm doing wrong?
add_action( 'wp_ajax_nopriv_save_sort', 'ccmanz_save_reorder' );
add_action('wp_ajax_save_sort','ccmanz_save_reorder');
function ccmanz_save_reorder() { //checking
//verify user intent
check_ajax_referer( 'wp-job-order', 'security' ); // this comes from wp_localize_script() in hrm-jobs.php
//capability check to ensure use caps
if ( ! current_user_can( 'manage_options' ) ) {
wp_die( __( 'You do not have permission to access this page.' ) );
}
$order = explode( ',', $_POST['order'] );
$counter = 0;
foreach ( $order as $item_id ) {
$post = array(
'ID' => (int) $item_id,
'menu_order' => $counter,
);
wp_update_post( $post );
$counter ++;
}
wp_send_json_success('POST SAVED');
}
My Ajax Call
jQuery(document).ready(function($) {
sortList = $( 'ul#custom-type-list' ); //store
var animation = $ ( '#loading-animation' );
var pageTitle = $ ( 'div h2');
sortList.sortable({
update: function ( event, ui) {
animation.show();
$.ajax({
url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
type: 'POST',
async: true,
cache: false,
dataType: 'json',
data:{
action: 'save_sort', // Tell WordPress how to handle this ajax request
order: sortList.sortable( 'toArray' ).toString(), // Passes ID's of list items in 1,3,2 format
security: WP_JOB_LISTING.security
},
success: function( response ) {
animation.hide();
$('div.updated').remove();
if( true === response.success ) {
console.log(sortList.sortable( 'toArray' ));
pageTitle.after(
'<div id="messsage" class="updated"><p>' + WP_JOB_LISTING.success + '</p></div>'
);
} else {
$('div.error').remove();
pageTitle.after( '<div id="messsage" class="error"><p>' + WP_JOB_LISTING.failure + '</div>' );
}
},
error: function ( error ) {
$( 'div.error' ).remove();
animation.hide();
//pageTitle.after( '<div id="messsage" class="error"><p>' + WP_JOB_LISTING.failure + '</div>' );
}
});
}//update
}); //sortable
});//jquery

WooCommerce Variations as Radio Buttons

is it possible within WooCommerce to change the variations dropdown into radio buttons without having to work with a plugin? I would like to have the following setup on the variations section:
1 liter (10€)
2 liter (20€)
3 Liter (25€)
The price at the bottom should be automatically changed when you select an option.
Thank you
EDIT: added variation_check() and JS variation checking thanks to #ThomasB!
EDIT2: make sure variation_check() also checks for backorder status to allow selection when a product can be backordered.
The best way I managed to get this working is to add radio button markup directly after the select dropdowns and then hide the select dropdowns using CSS. You'll also need some custom JS to trigger the hidden select value changes so that your price will change according to the radio button you select.
Here's how I added the markup:
function variation_radio_buttons($html, $args) {
$args = wp_parse_args(apply_filters('woocommerce_dropdown_variation_attribute_options_args', $args), array(
'options' => false,
'attribute' => false,
'product' => false,
'selected' => false,
'name' => '',
'id' => '',
'class' => '',
'show_option_none' => __('Choose an option', 'woocommerce'),
));
if(false === $args['selected'] && $args['attribute'] && $args['product'] instanceof WC_Product) {
$selected_key = 'attribute_'.sanitize_title($args['attribute']);
$args['selected'] = isset($_REQUEST[$selected_key]) ? wc_clean(wp_unslash($_REQUEST[$selected_key])) : $args['product']->get_variation_default_attribute($args['attribute']);
}
$options = $args['options'];
$product = $args['product'];
$attribute = $args['attribute'];
$name = $args['name'] ? $args['name'] : 'attribute_'.sanitize_title($attribute);
$id = $args['id'] ? $args['id'] : sanitize_title($attribute);
$class = $args['class'];
$show_option_none = (bool)$args['show_option_none'];
$show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __('Choose an option', 'woocommerce');
if(empty($options) && !empty($product) && !empty($attribute)) {
$attributes = $product->get_variation_attributes();
$options = $attributes[$attribute];
}
$radios = '<div class="variation-radios">';
if(!empty($options)) {
if($product && taxonomy_exists($attribute)) {
$terms = wc_get_product_terms($product->get_id(), $attribute, array(
'fields' => 'all',
));
foreach($terms as $term) {
if(in_array($term->slug, $options, true)) {
$id = $name.'-'.$term->slug;
$radios .= '<input type="radio" id="'.esc_attr($id).'" name="'.esc_attr($name).'" value="'.esc_attr($term->slug).'" '.checked(sanitize_title($args['selected']), $term->slug, false).'><label for="'.esc_attr($id).'">'.esc_html(apply_filters('woocommerce_variation_option_name', $term->name)).'</label>';
}
}
} else {
foreach($options as $option) {
$id = $name.'-'.$option;
$checked = sanitize_title($args['selected']) === $args['selected'] ? checked($args['selected'], sanitize_title($option), false) : checked($args['selected'], $option, false);
$radios .= '<input type="radio" id="'.esc_attr($id).'" name="'.esc_attr($name).'" value="'.esc_attr($option).'" id="'.sanitize_title($option).'" '.$checked.'><label for="'.esc_attr($id).'">'.esc_html(apply_filters('woocommerce_variation_option_name', $option)).'</label>';
}
}
}
$radios .= '</div>';
return $html.$radios;
}
add_filter('woocommerce_dropdown_variation_attribute_options_html', 'variation_radio_buttons', 20, 2);
function variation_check($active, $variation) {
if(!$variation->is_in_stock() && !$variation->backorders_allowed()) {
return false;
}
return $active;
}
add_filter('woocommerce_variation_is_active', 'variation_check', 10, 2);
And here's the JS I used:
$(document).on('change', '.variation-radios input', function() {
$('.variation-radios input:checked').each(function(index, element) {
var $el = $(element);
var thisName = $el.attr('name');
var thisVal = $el.attr('value');
$('select[name="'+thisName+'"]').val(thisVal).trigger('change');
});
});
$(document).on('woocommerce_update_variation_values', function() {
$('.variation-radios input').each(function(index, element) {
var $el = $(element);
var thisName = $el.attr('name');
var thisVal = $el.attr('value');
$el.removeAttr('disabled');
if($('select[name="'+thisName+'"] option[value="'+thisVal+'"]').is(':disabled')) {
$el.prop('disabled', true);
}
});
});
I don't know how to do that without a plugin, but I suggest you drop that requirement, and use the Woocommerce Radio Buttons plugin. This does exactly what you want:
You can use Variation Swatches for WooCommerce plugin. It worked for me.
I extended further the JavaScript part of cfx' answer to include cases of multiple variations. The idea is to hide and show available variations (radio buttons) based on the select inputs.
<script>
jQuery(document).on('change', '.variation-radios input', function() {
jQuery('.variation-radios input:checked').each(function(index, element) {
let el = jQuery(element);
jQuery('select[name="' + el.attr('name') + '"]').val(el.attr('value')).trigger('change');
recreateRadioInputs();
});
});
jQuery(document).on('woocommerce_update_variation_values', function() {
jQuery('.variation-radios input').each(function(index, element) {
let el = jQuery(element);
el.removeAttr('disabled');
if(jQuery('select[name="' + el.attr('name') + '"] option[value="' + el.attr('value') + '"]').is(':disabled')) {
$el.prop('disabled', true);
}
});
});
// recreate readio inputs based on the select inputs
function recreateRadioInputs() {
jQuery('.variation-radios input, .variation-radios label').hide();
jQuery('.variations select').each(function() {
let inputName = jQuery(this).attr('name');
jQuery(this).find('option').each(function() {
let inputVal = jQuery(this).val();
let radioInput = jQuery('.variation-radios input[value="' + inputVal + '"]');
jQuery('.variation-radios label[for="' + radioInput.attr('id') + '"]').show();
radioInput.show();
});
});
}
</script>

fullcalendar json is not working

I am having a hardtime trying to populate events on fullcalendar, following is my code, trying to fetch data from mysql
class mycalendarleaves extends Generic{
function calendar_LeaveDetails(){
$year = date('Y');
$month = date('m');
$this->user_id = $_SESSION['user_id'];
$params = array( ':user_id' => $this->user_id );
$stmt = parent::query("SELECT * FROM messages WHERE TYPE = 'leave' AND leave_status='approved' AND sender_id = :user_id;", $params);
while($value = $stmt->fetch()) :
$_SESSION['cal_data'] = array(
'id' => $value['id'],
'title' => $value['sender_name'],
'start' => "$year-$month-10"
);
endwhile;
}
}
echo json_encode($_SESSION['cal_data']);
$mycalendarleaves = new mycalendarleaves();
here is the script
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "calendar.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
I dont get any error, the calendar still appears blank without data. what am i doing wrong?
I got it to work, incase someone else is having a problem may be this will help them as well.
following is my function that is fetching data from mysql
function calendar_EventDetails(){
$year = date('Y');
$month = date('m');
$this->id = $_SESSION['id'];
$params = array( ':id' => $this->id );
$stmt = parent::query("SELECT * FROM TABLENAME WHERE TYPE = 'event' AND status='approved' AND id = :id;", $params);
unset($_SESSION['events']);
while($value = $stmt->fetch()) :
$_SESSION['events'][] = array(
'id' => $value['id'],
'title' => $value['name'],
'start' => "$year-$month-10"
);
endwhile;
}
Following is the script which is calling the php file where the above function is placed
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "calendar.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});

Resources