[FogBugz #238] Full calendar compatible IPAD #300

New Issue

Open

opened 2023-07-04 00:02:44 +02:00 by fbenoist68 · 6 comments

fbenoist68 commented 2023-07-04 00:02:44 +02:00

Owner

Assigned To: CLOSED
Project: Mobile Portal
Area: Divers
Category: Bogue
Priority: A faire le plus tôt possible

Assigned To: CLOSED Project: Mobile Portal Area: Divers Category: Bogue Priority: A faire le plus tôt possible

fbenoist68 commented 2023-07-04 00:02:47 +02:00

Poster

Owner

Event ID: 1139
Date: 2014-01-28T22:37:54Z
Person: Frederik Benoist
Description: Fermé par Frederik Benoist

Event ID: 1139 Date: 2014-01-28T22:37:54Z Person: Frederik Benoist Description: Fermé par Frederik Benoist

fbenoist68 commented 2023-07-04 00:02:51 +02:00

Poster

Owner

Event ID: 1138
Date: 2014-01-28T22:37:54Z
Person: Frederik Benoist
Description: Resolved (Fixed) and assigned to Frederik Benoist by Frederik Benoist

Inutile. Ajout visite par menu

Event ID: 1138 Date: 2014-01-28T22:37:54Z Person: Frederik Benoist Description: Resolved (Fixed) and assigned to Frederik Benoist by Frederik Benoist <p> Inutile. Ajout visite par menu</p>

fbenoist68 commented 2023-07-04 00:02:55 +02:00

Poster

Owner

Event ID: 1050
Date: 2013-12-07T05:32:03Z
Person: Frederik Benoist
Description: Modifié par Frederik Benoist

 

/********************************

* UPDATE: I have crated a plugin to do this: https://github.com/jboesch/jQuery-fullCalendar-iPad-drag-drop/

*********************************/

/*These are the brief steps that it takes to get fullCalendar (http://arshaw.com/fullcalendar/) up and running with drag/drop support on the iPad. This assumes you already have fullCalendar setup.*/

 

//1. Include a copy of jQuery touch punch in your project, you can find it here: https://github.com/furf/jquery-ui-touch-punch

 

//2. Go into jquery-touch-punch.js and right after this line (around line 57 - mouseProto._mouseDown = function (event) {) add this: this._mouseDownEvent = event;

 

//3. Add this function somewhere in your global.js file or wherever you want:

function isTouchDevice()

{

var ua = navigator.userAgent;

var isTouchDevice = (

ua.match(/iPad/i) ||

ua.match(/iPhone/i) ||

ua.match(/iPod/i) ||

ua.match(/Android/i)

);

 

return isTouchDevice;

}

 

// 4. Now you'll need to hook into the fullCalendar loading callback (http://arshaw.com/fullcalendar/docs/event_data/loading/): So your code should include the loading key like so:

 

loading: function(isLoading)

{

if(!isLoading && isTouchDevice())

{

// Since the draggable events are lazy(bind)loaded, we need to

// trigger them all so they're all ready for us to drag/drop

// on the iPad. w00t!

$('.fc-event-draggable').each(function(){

var e = jQuery.Event("mouseover", {

target: this.firstChild,

_dummyCalledOnStartup: true

});

$(this).trigger(e);

});

}

}

 

// 5. If you're using the eventClick function build into fullCalendar, you'll want to refactor it to be something like:

var options = { minTime: 5, maxTime: 18, loading: ....(code above) };

var method = (isTouchDevice()) ? 'eventMouseover' : 'eventClick';

options[method] = function(event, jsEvent, view)

{

if(jsEvent._dummyCalledOnStartup)

{

return;

}

// Do something here when someone clicks on the event.

}

$('#yourcal').fullCalendar(options);

 

// 6. That's it! Have fun!

Event ID: 1050 Date: 2013-12-07T05:32:03Z Person: Frederik Benoist Description: Modifié par Frederik Benoist <p> &nbsp;</p> <pre class="line-pre" style="font-family: Consolas, 'Liberation Mono', Courier, monospace; line-height: 16px; padding: 0px"> </pre> <div class="line" id="file-gistfile1-js-LC1"> <span class="cm" style="color: rgb(153, 153, 136); font-style: italic">/********************************</span></div> <div class="line" id="file-gistfile1-js-LC2"> <span class="cm" style="color: rgb(153, 153, 136); font-style: italic">* UPDATE: I have crated a plugin to do this: https://github.com/jboesch/jQuery-fullCalendar-iPad-drag-drop/</span></div> <div class="line" id="file-gistfile1-js-LC3"> <span class="cm" style="color: rgb(153, 153, 136); font-style: italic">*********************************/</span></div> <div class="line" id="file-gistfile1-js-LC4"> <span class="cm" style="color: rgb(153, 153, 136); font-style: italic">/*These are the brief steps that it takes to get fullCalendar (http://arshaw.com/fullcalendar/) up and running with drag/drop support on the iPad. This assumes you already have fullCalendar setup.*/</span></div> <div class="line" id="file-gistfile1-js-LC5"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC6"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">//1. Include a copy of jQuery touch punch in your project, you can find it here: https://github.com/furf/jquery-ui-touch-punch</span></div> <div class="line" id="file-gistfile1-js-LC7"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC8"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">//2. Go into jquery-touch-punch.js and right after this line (around line 57 - mouseProto._mouseDown = function (event) {) add this: this._mouseDownEvent = event;</span></div> <div class="line" id="file-gistfile1-js-LC9"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC10"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">//3. Add this function somewhere in your global.js file or wherever you want:</span></div> <div class="line" id="file-gistfile1-js-LC11"> <span class="kd" style="font-weight: bold">function</span> <span class="nx">isTouchDevice</span><span class="p">()</span></div> <div class="line" id="file-gistfile1-js-LC12"> <span class="p">{</span></div> <div class="line" id="file-gistfile1-js-LC13"> <span class="kd" style="font-weight: bold">var</span> <span class="nx">ua</span> <span class="o" style="font-weight: bold">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">;</span></div> <div class="line" id="file-gistfile1-js-LC14"> <span class="kd" style="font-weight: bold">var</span> <span class="nx">isTouchDevice</span> <span class="o" style="font-weight: bold">=</span> <span class="p">(</span></div> <div class="line" id="file-gistfile1-js-LC15"> <span class="nx">ua</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr" style="color: rgb(0, 153, 38)">/iPad/i</span><span class="p">)</span> <span class="o" style="font-weight: bold">||</span></div> <div class="line" id="file-gistfile1-js-LC16"> <span class="nx">ua</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr" style="color: rgb(0, 153, 38)">/iPhone/i</span><span class="p">)</span> <span class="o" style="font-weight: bold">||</span></div> <div class="line" id="file-gistfile1-js-LC17"> <span class="nx">ua</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr" style="color: rgb(0, 153, 38)">/iPod/i</span><span class="p">)</span> <span class="o" style="font-weight: bold">||</span></div> <div class="line" id="file-gistfile1-js-LC18"> <span class="nx">ua</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr" style="color: rgb(0, 153, 38)">/Android/i</span><span class="p">)</span></div> <div class="line" id="file-gistfile1-js-LC19"> <span class="p">);</span></div> <div class="line" id="file-gistfile1-js-LC20"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC21"> <span class="k" style="font-weight: bold">return</span> <span class="nx">isTouchDevice</span><span class="p">;</span></div> <div class="line" id="file-gistfile1-js-LC22"> <span class="p">}</span></div> <div class="line" id="file-gistfile1-js-LC23"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC24"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">// 4. Now you&#39;ll need to hook into the fullCalendar loading callback (http://arshaw.com/fullcalendar/docs/event_data/loading/): So your code should include the loading key like so:</span></div> <div class="line" id="file-gistfile1-js-LC25"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC26"> <span class="nx">loading</span><span class="o" style="font-weight: bold">:</span> <span class="kd" style="font-weight: bold">function</span><span class="p">(</span><span class="nx">isLoading</span><span class="p">)</span></div> <div class="line" id="file-gistfile1-js-LC27"> <span class="p">{</span></div> <div class="line" id="file-gistfile1-js-LC28"> <span class="k" style="font-weight: bold">if</span><span class="p">(</span><span class="o" style="font-weight: bold">!</span><span class="nx">isLoading</span> <span class="o" style="font-weight: bold">&amp;&amp;</span> <span class="nx">isTouchDevice</span><span class="p">())</span></div> <div class="line" id="file-gistfile1-js-LC29"> <span class="p">{</span></div> <div class="line" id="file-gistfile1-js-LC30"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">// Since the draggable events are lazy(bind)loaded, we need to</span></div> <div class="line" id="file-gistfile1-js-LC31"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">// trigger them all so they&#39;re all ready for us to drag/drop</span></div> <div class="line" id="file-gistfile1-js-LC32"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">// on the iPad. w00t!</span></div> <div class="line" id="file-gistfile1-js-LC33"> <span class="nx">$</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68)">&#39;.fc-event-draggable&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd" style="font-weight: bold">function</span><span class="p">(){</span></div> <div class="line" id="file-gistfile1-js-LC34"> <span class="kd" style="font-weight: bold">var</span> <span class="nx">e</span> <span class="o" style="font-weight: bold">=</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2" style="color: rgb(221, 17, 68)">&quot;mouseover&quot;</span><span class="p">,</span> <span class="p">{</span></div> <div class="line" id="file-gistfile1-js-LC35"> <span class="nx">target</span><span class="o" style="font-weight: bold">:</span> <span class="k" style="font-weight: bold">this</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">,</span></div> <div class="line" id="file-gistfile1-js-LC36"> <span class="nx">_dummyCalledOnStartup</span><span class="o" style="font-weight: bold">:</span> <span class="kc" style="font-weight: bold">true</span></div> <div class="line" id="file-gistfile1-js-LC37"> <span class="p">});</span></div> <div class="line" id="file-gistfile1-js-LC38"> <span class="nx">$</span><span class="p">(</span><span class="k" style="font-weight: bold">this</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span></div> <div class="line" id="file-gistfile1-js-LC39"> <span class="p">});</span></div> <div class="line" id="file-gistfile1-js-LC40"> <span class="p">}</span></div> <div class="line" id="file-gistfile1-js-LC41"> <span class="p">}</span></div> <div class="line" id="file-gistfile1-js-LC42"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC43"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">// 5. If you&#39;re using the eventClick function build into fullCalendar, you&#39;ll want to refactor it to be something like:</span></div> <div class="line" id="file-gistfile1-js-LC44"> <span class="kd" style="font-weight: bold">var</span> <span class="nx">options</span> <span class="o" style="font-weight: bold">=</span> <span class="p">{</span> <span class="nx">minTime</span><span class="o" style="font-weight: bold">:</span> <span class="mi" style="color: rgb(0, 153, 153)">5</span><span class="p">,</span> <span class="nx">maxTime</span><span class="o" style="font-weight: bold">:</span> <span class="mi" style="color: rgb(0, 153, 153)">18</span><span class="p">,</span> <span class="nx">loading</span><span class="o" style="font-weight: bold">:</span> <span class="p">....(</span><span class="nx">code</span> <span class="nx">above</span><span class="p">)</span> <span class="p">};</span></div> <div class="line" id="file-gistfile1-js-LC45"> <span class="kd" style="font-weight: bold">var</span> <span class="nx">method</span> <span class="o" style="font-weight: bold">=</span> <span class="p">(</span><span class="nx">isTouchDevice</span><span class="p">())</span> <span class="o" style="font-weight: bold">?</span> <span class="s1" style="color: rgb(221, 17, 68)">&#39;eventMouseover&#39;</span> <span class="o" style="font-weight: bold">:</span> <span class="s1" style="color: rgb(221, 17, 68)">&#39;eventClick&#39;</span><span class="p">;</span></div> <div class="line" id="file-gistfile1-js-LC46"> <span class="nx">options</span><span class="p">[</span><span class="nx">method</span><span class="p">]</span> <span class="o" style="font-weight: bold">=</span> <span class="kd" style="font-weight: bold">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">jsEvent</span><span class="p">,</span> <span class="nx">view</span><span class="p">)</span></div> <div class="line" id="file-gistfile1-js-LC47"> <span class="p">{</span></div> <div class="line" id="file-gistfile1-js-LC48"> <span class="k" style="font-weight: bold">if</span><span class="p">(</span><span class="nx">jsEvent</span><span class="p">.</span><span class="nx">_dummyCalledOnStartup</span><span class="p">)</span></div> <div class="line" id="file-gistfile1-js-LC49"> <span class="p">{</span></div> <div class="line" id="file-gistfile1-js-LC50"> <span class="k" style="font-weight: bold">return</span><span class="p">;</span></div> <div class="line" id="file-gistfile1-js-LC51"> <span class="p">}</span></div> <div class="line" id="file-gistfile1-js-LC52"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">// Do something here when someone clicks on the event.</span></div> <div class="line" id="file-gistfile1-js-LC53"> <span class="p">}</span></div> <div class="line" id="file-gistfile1-js-LC54"> <span class="nx">$</span><span class="p">(</span><span class="s1" style="color: rgb(221, 17, 68)">&#39;#yourcal&#39;</span><span class="p">).</span><span class="nx">fullCalendar</span><span class="p">(</span><span class="nx">options</span><span class="p">);</span></div> <div class="line" id="file-gistfile1-js-LC55"> &nbsp;</div> <div class="line" id="file-gistfile1-js-LC56"> <span class="c1" style="color: rgb(153, 153, 136); font-style: italic">// 6. That&#39;s it! Have fun!</span></div>

fbenoist68 commented 2023-07-04 00:02:57 +02:00

Poster

Owner

Event ID: 1049
Date: 2013-12-07T05:31:56Z
Person: Frederik Benoist
Description: Modifié par Frederik Benoist

https://gist.github.com/jboesch/1299783

Event ID: 1049 Date: 2013-12-07T05:31:56Z Person: Frederik Benoist Description: Modifié par Frederik Benoist <p> https://gist.github.com/jboesch/1299783</p>

fbenoist68 commented 2023-07-04 00:02:59 +02:00

Poster

Owner

Event ID: 1046
Date: 2013-12-07T05:09:56Z
Person: Frederik Benoist
Description: Attribué à Frederik Benoist par Frederik Benoist

Event ID: 1046 Date: 2013-12-07T05:09:56Z Person: Frederik Benoist Description: Attribué à Frederik Benoist par Frederik Benoist

fbenoist68 commented 2023-07-04 00:03:01 +02:00

Poster

Owner

Event ID: 1045
Date: 2013-12-07T05:09:55Z
Person: Frederik Benoist
Description: Ouvert par Frederik Benoist

Event ID: 1045 Date: 2013-12-07T05:09:55Z Person: Frederik Benoist Description: Ouvert par Frederik Benoist

fbenoist68 referenced this issue 2023-07-04 07:20:00 +02:00

[FogBugz #300] Dans galerie photo ajouter recherche commentaire photos #363

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

Labels

Clear labels

No items

No Label

Milestone

Clear milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

No Assignees

1 Participants

Notifications

Subscribe

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: fbenoist68/mobileportal#300

There is no content yet.