fullCalendar time and date format symfony 3.0 - javascript

I am junior in development and my mission is to make an agenda for doctors where they will be able to enter new appointments, view their planning, etc.
I am trying to do so with AdminLTE and Full Calendar on Symfony 3.0. The version of Full Calendar used by AdminLTE was 2.2.5.
As I needed my Calendar to return the list of events for a day ("listDay") and the older version did not implement this function, I updated Full Calendar version to v3.4.0.
Now I am having trouble with the axisFormat (timeFormat) et dateFormat.
I would like the date to be displayed like : day/month/year (e.g: 13/06/2017 or mar. 13/06) and the time like : HH:mm (e.g: 15h20 and not 3:pm).
But for now, the date and time are displayed like :
view of my calendar
I found a lot of solutions on the web and when my calendar is not on Symfony, the code works fine.
Does anybody have an idea of what I could do to solve my issue ? Here is the code content of my own js file :
<section class="content">
<div class="row">
<!-- /.col -->
<div class="col-md-12">
<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar"></div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
</div>
<!-- /.col -->
{# <div class="col-md-2">
<div class="box box-solid">
<div class="box-header with-border">
<h4 class="box-title">Motifs de consultation</h4>
</div>
<div class="box-body">
<!-- type de consultations -->
<div id="legende">
<div class="bg-green">Première consultation</div>
<div class="bg-yellow">Visite de contrôle</div>
<div class="bg-aqua">Chirurgie réfractive</div>
<div class="bg-light-blue">Rééducation visuelle</div>
<div class="bg-red">Urgences</div>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /. box -->
</div>#}
</div>
<!-- /.row -->
</section>

Related

How to make this DIV scroll down ONLY to end of its section?

Consider the code below:
What I need to do is to have <div class="col-lg-12 kip"> and all it's content scroll down only to the end of section workOne and NOTHING BEYOND THAT ..
I have attached an image here that will show you what happens now to this fixed div,
as you can see in the image, it leave its section and goes beyond the button / what I need to do is that have it stop and the end of the section or RIGHT ABOVE THE BUTTON.
How can I do this either in CSS or JS / please be detailed as much as you can because as a beginner I may need illustration.
IMAGE TO SHOW THE ISSUE
<section id="workOne">
<div class="container">
<div class="row">
<!-- #### DIV CLASS "kip" is what need to be fixed and scroll down to end of this section#### -->
<div class="col-lg-12 kip">
<h2>Kipeesh Language Check // Version 1.0</h2>
<p>Client asked to develop a simple language learning app.</p>
<ul class="kipul">
<li>Development in progress</li>
<li>Will be made to fit Wordpress</li>
<li><mark>html</mark> <mark>css</mark> <mark>javascript</mark> <mark>php</mark></li>
</ul>
</div>
<!-- #### ONE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>01. Overview</p>
<img src="assets/images/kip1.jpg">
</div>
<!-- #### TWO #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>02. Create a button to hide elements.</p>
<img src="assets/images/kip2.jpg">
</div>
<!-- #### THREE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>03. Put the button to work / hide elements</p>
<img src="assets/images/kip3.jpg">
</div>
<!-- #### FOUR #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>04. Add a reveal button to display one item at a time</p>
<img src="assets/images/kip4.jpg">
</div>
<button type="button" class="btn btnWork btn-outline-light btn-lg">View Version 1.0</button>
</div>
</div>
</section>
<!-- #### DIV CLASS "kip" must end here and and scroll down further to the next section #### -->
Done, fixed with the following:
.kip{
position: sticky;
top: 50%;
}

Materialize - Autocomplete does not show options instantly

I have a problem with Materialize's autocomplete form.
I'am using it within a card. But the options are not shown instantly.
For example, while typing a 'G' the autocomplete form should suggest 'Google'. But it doesn't. Only by mouseclicking on the form the autocomplete options are shown. But I can not locate a mistake.
HTML (there is just one autocomplete form on this page):
<div id="referenceSetCard" class="row">>
<div class="col s12 m4 l4 offset-m4 offset-l4">
<div class="card over-all">
<!-- Title -->
<div class="card-action red darken-4 white-text">
<h4>Header</h4>
</div>
<!-- Content -->
<div class="card-content">
<p>Text</p>
<!-- Input field -->
<div class="form-field">
<div class="input-field">
<input id="referenceDataInput" type="text" class="autocomplete">
<label for="referenceDataInput">Autocomplete</label>
</div>
</div>
<!-- Buttons -->
<div class="card-action">
<a id="buttonConfirm" class="waves-effect waves-light btn red hide-on-med-and-down">
Confirm
</a>
<a id="buttonCancel" class="waves-effect waves-light btn red hide-on-med-and-down">
Cancel
</a>
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
Just have a look:
https://codepen.io/michaelkonstreu/pen/zLoaJE
Please use these new versions of cdnjs or minified scripts.
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
You can also change the value of minLength like when you want autocomplete dropdown to popup.
Codepen of Autocomplete with V 1.0.0-rc.2
Codepen of your code with V 1.0.0-rc.2
I have forked and updated the Pen you made and here's the link for the codepen:
codepen.io/immad-hamid/pen/ajBjXx
I have change the version of the scripts and it's working now. May be there's an issue of jQuery version. Now you have a working demo so you can try out with changing the versions.

How to make Slider similar/gallery to the Amazon product Slider

I building a website, and I am not good in js or jQuery. I have no idea what to do. I was in search for couple days, to find any library that support this feature. However, there are different libraries I found, but most of them are separate from what I need, zoom and thumbnails. It has to be similar to Amazon or eBay product listing slider.
Can any one give me a clue where should I start?
PS. I tried swiper.js, but it has zoom only on double click.
Updated 5/16/2017
Example
Hi first of all visit to the link http://www.landmarkmlp.com/js-plugin/owl.carousel/ and download slider.
open your header of the website theme and put the js and CSS which one mentions into the snippet below, and replace the images, js and css files path which where it is.
After that put the HTML sections where you would like to show your slider, and replace the div with your dynamic products loop code.
$(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet">
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-example" class="owl-carousel">
<div class="item darkCyan">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item zombieGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item violet">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you like</h4>
</div>
<div class="item yellowLight">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/tons.png" alt="Tons of Opotions">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
Hope so it will work for you. You just need to update files path according where it is situated in your website files directories.

Fullpage.js : Sections have higher height than content

I'm currently working on a single page website using Bootstrap and fullpagejs :
I've followed the required HTML structure, but each sections of my website have got a huge height. So the sections don't fit with their content.
I noticed that if I add the fp-auto-height class, everything is ok. The content fits with the sections. But this is not the right way to do that.
I have no idea about what happens.
Here is my first section for example
<div id="fullpage">
<!-- section 1 begin -->
<div data-anchor="p1-a" class="section">
<div class="container-fluid">
<div id="p1" class="row vertical-align">
<div class="col-md-offset-5 col-md-6">
<div class="row">
<div class="col-xs-12">
<h1 id="title-p1" class="reduce-space text-center">ANTHONY<span style="color: #E28509;">ROANI</span></h1>
</div>
</div> <!-- end row title intro -->
<div class="row">
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div><!-- end left intro -->
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div> <!-- end right intro -->
<div class="container-fluid">
<i class="intro-text"> ...</i>
<p class="intro-text">- Luc Fayard </p>
</div><!-- end citation intro -->
</div> <!-- end row content text intro -->
</div> <!-- end colonnes + offset page 1 -->
</div><!-- end bigrow page 1 -->
</div>
</div> <!-- SECTION 1 END -->
[... other sections]
</div> <!-- end fullpage -->
Make sure you are not forgetting to add the compulsory <!DOCTYPE html> declaration at the very start of your document as detailed in this tutorial.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Demo
</body>
</html>
Doctype is necessary in any website.

Twitter Bootstrap Carousel Misaligning each Slide Transition

I integrated the Bootstrap Carousel (http://getbootstrap.com/examples/carousel/) in my 'comingsoon' homepage: http://247tutors.net/comingsoon/index.html
If you wait for the page to fully load, you will see that the automated slide transitions are not aligning properly (problem occurring in Chrome and Firefox). Each new slide comes in at a level and then once slide/img is covering carousel, i.e., at the end of the slide transition, the slide drops down by ~10px.
Notice my carousel's side panels onHover, leave a gap of about the same amount of pixels at the bottom.
..Can't tell it the error is caused by the navbar css (although, I do have the carousel-style.css being pulled in on the index.html after all other relevant css files (thus, giving carousel-style.css precedent over the class & div settings), or possibly, the error stems from loginDropdown.css (http://247tutors.net/comingsoon/css/loginDropdown.css)..?
Full source code url: view-source:http://247tutors.net/comingsoon/index.html
My Carousel css is here: http://247tutors.net/comingsoon/css/carousel-style.css
Carousel region snippet from index.html:
<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Advanced Subjects</h1>
<h4 id="textNormal">We specialize in college
<br />
courses and above.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item active -->
<div class="item">
<img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal" style="color:#222;">24/7 Availability</h1>
<h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Economical</h1>
<h4 id="textNormal">Pay by the minute, the
<br />
week, or the month.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Exceptional Tutors</h1>
<h4 id="textNormal">College graduates from top schools
<br />
in a wide range of disciplines.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
</div> <!-- END carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->
You have to remove the absolute positioning of the .carousel-inner > .item > img class on line 11 of your carousel-style.css style sheet. It should remove the skipping effect! ;)

Categories