I have a .html file which contains id="fixedtext", I want to replace all these id with id="uniquetext"
the grunt-text-replace just replaces the first id it finds and doesnot parse the entire text.
Any idea how can I make either grunt-text-replace https://github.com/yoniholmes/grunt-text-replace
or
grunt-replace https://www.npmjs.com/package/grunt-replace
to do this for the entire document and not just for the first occurrence.
replace: {
dist: {
options:{
patterns:[{
match:'id="fixedtext"',
replacement: 'id="'+something[i++] +'"'
}],
files:[
{
expand: true,
src:['./source.html'],
dest:'./dest.html'
}
]
}
}
},
this is what can be done if unique ids are to be added.
Assuming that you already have an array of all the id you want to add when you run your task.
In this case the id's are the file names
create your own wrapper task
var path = require('path');
var fs = require('fs');
grunt.initconfig({
wrap:{
html:{
header:'<script type="text/ng-template" ',
footer:'</script>',
src:'./yourPathToFile/',
dest'./yourPathToDest/'
}
}
});
grunt.registerMultiTask('wrap', 'wrap header and footer with custom id', function(){
var data = this.data;
getListOfFiles(data.src);
function getListOfFiles(expand_path){
var listOfFiles = fs.readdirSync(expand_path);
for(var i=0; i<listOfFiles.length; i++){
var completePath = expand_path + listOfFiles[i];
var extension = path.extname(completePath);
if(fs.lstatSync(completePath).isDirectory()){
var newDirPath = completePath + '/';
console.log('true------ : \n',newDirPath);
getListofFiles(newDirPath);
}
else if(extension == '.html'){
console.log('F:\n', completePath);
fullSrcPath = path.resolve(completePath);
content = grunt.file.read(fullSrcPath);
scriptId = 'id="' + listOfFiles[i]+'">';
header = (grunt.template.process(data.header));
footer = (grunt.template.process(data.footer));
wholeFile = header + scriptId + content + footer;
grunt.file.write(fullSrcPath, wholeFile);
}
}
}
});
Related
I'm trying to get the key values of the documents in my Firestore database, but I'm not getting it.
This value below:
This my code:
function objectsToArray(objects) {
var outputArray = [];
for (var i in objects){
outputArray.push([
objects[i].fields.id, objects[i].fields.data, objects[i].fields.acao,
objects[i].fields.categoria, objects[i].fields.movimentos, objects[i].fields.descricao
]);
}
return outputArray;
}
My output Logger.log of JSON:
[20-01-11 19:42:06:370 CET] [{"name":"projects/orcamento- b37bb/databases/(default)/documents/orcamento/0MwgqEm9abho3bpB5yCc","fields":
{"categoria":"SUPERMERCADO","data":"2019-07- 31T00:00:00.000Z","descricao":"","acao":"Despesa","movimentos":23.82,"id":107},
"createTime":"2019-12-31T14:35:47.959299Z","updateTime":"2019-12- 31T14:35:47.959299Z"},
any suggestions?
Thanks
The original data seems to be structured like this:
[
{
"name":"projects/orcamento- b37bb/databases/(default)/documents/orcamento/0MwgqEm9abho3bpB5yCc",
"fields": {
"categoria":"SUPERMERCADO",
"data":"2019-07- 31T00:00:00.000Z",
"descricao":"",
"acao":"Despesa",
"movimentos":23.82,
"id":107
},
"createTime":"2019-12-31T14:35:47.959299Z",
"updateTime":"2019-12- 31T14:35:47.959299Z"
},
You want the value: 0MwgqEm9abho3bpB5yCc
Which is in the element with the name property key.
function objectsToArray(objects) {
var L,nameValue,finalValue;
objects = [
{
"name":"projects/orcamento- b37bb/databases/(default)/documents/orcamento/0MwgqEm9abho3bpB5yCc",
"fields": {
"categoria":"SUPERMERCADO",
"data":"2019-07- 31T00:00:00.000Z",
"descricao":"",
"acao":"Despesa",
"movimentos":23.82,
"id":107
},
"createTime":"2019-12-31T14:35:47.959299Z",
"updateTime":"2019-12- 31T14:35:47.959299Z"
},
]
var outputArray = [];
L = objects.length;
for (var i=0;i<L;i++){
nameValue = objects[i].name;
Logger.log('nameValue: ' + nameValue)
finalValue = nameValue.slice(nameValue.lastIndexOf("/")+1);
Logger.log('finalValue: ' + finalValue)
outputArray.push(finalValue);
}
Logger.log('outputArray: ' + JSON.stringify(outputArray))
return outputArray;
}
Please i am trying to modify the filename of a selected file posted by a user before uploading to Amazon S3 using the edgee:slinghot package. I can upload the file quite alright but the problem is how do i modify the filename.
I modified it on the client using by saving the modified name into a variable. My problem now is how to access that variable declared and saved on the Client in the Server environment. I just can't seem to wrap my head around it.
'change .js-submitTeamPaper' : function(event , template){
event.preventDefault();
let paper = template.paperDetails.get();
newFilename = paper[0].paper_name + "_"
_.map(paper[0].member , (member)=>{
newFilename += "_" + member.regnum + "_"
});
newFilename += paper[0]._id;
let file = event.target.value;
let fileArray = file.split(".");
let ext = fileArray[fileArray.length - 1];
newFilename += "." + ext;
studentFileUpload(event , template , 'submitTeamTermPaper' , 'divProgress');
}
The code to upload the file.
let _collectfile = (event , template) =>{
let file = event.target.files[0]
return file
}
let _showProgressBar = (div) => {
let _div = document.getElementById(div);
_div.classList.remove("hide");
}
let _closeProgressBar = (div) => {
let _div = document.getElementById(div);
_div.classList.add("hide");
}
let _slingShotUploadConfigure = (event , template , folder ,div) => {
let _upload = new Slingshot.Upload(folder);
let _file = _collectfile(event , template);
_showProgressBar(div);
_upload.send(_file , (error , downloadUrl) => {
template.uploader.set();
if (error){
//throw new Meteor.Error('500' , error.reason);
event.target.value = '';
sAlert.error(error.reason , {effect: 'bouncyflip',
position: 'bottom-right', timeout: 3000, onRouteClose: false, stack: false, offset: '150px'});
_closeProgressBar(div);
}
else{
sAlert.success('File was uploaded successfully' , {effect: 'genie',
position: 'bottom-right', timeout: 3000, onRouteClose: false, stack: false, offset: '150px'});
event.target.value = '';
template.downloadUrl.set(downloadUrl);
_closeProgressBar(div);
//return downloadUrl;
}
});
template.uploader.set(_upload);
}
export default function(event , template , folder ,div , progress){
return _slingShotUploadConfigure(event , template , folder,div , progress)
}
I then imported the module as studentFileUpload from '../../modules/handle-fileuploads';
Below is the meteor-slingshot code to do the upload
Slingshot.createDirective("submitTeamTermPaper", Slingshot.S3Storage, {
bucket: Meteor.settings.BucketName,
AWSAccessKeyId : Meteor.settings.AWSAccessKeyId,
AWSSecretAccessKey : Meteor.settings.AWSSecretAccessKey,
acl: "public-read",
authorize: function () {
// do some validation
// e.g. deny uploads if user is not logged in.
if (this.userId) {
return true;
}
},
key: function (file) {
//file here is the file to be uploaded how do i get the modified file name i defined in the client as newFilename here
let timeStamp = + new Date;
//let newFilename = file.name.replace(/_/g , "-");
return 'Team_Term_Papers/' + timeStamp + '_' + '_' + newFilename;
}
});
From my code newFilename is the variable that holds the modified filename. How do i access it from the server environment. Any help is really appreciated. Thanks
You can pass extra information through to slingshot using metacontext:
metacontext = {newName: "foo"};
let _upload = new Slingshot.Upload(folder,metacontext);
Then you can access that metacontext in your key function:
key: function (file,metacontext) {
let timeStamp = + new Date;
let newFilename = metacontext ? metacontext.newName : file.name;
newFilename = newFilename.replace(/_/g , "-");
return 'Team_Term_Papers/' + timeStamp + '_' + '_' + newFilename;
}
I'm a newbie to the field of javascript/angularJS, so please bear with me.I need a way to convert .xls/.xlsx files into .zip files by using jsZip library. I'm making use of alasql for generating the .xls file. I've looked all over for any possible solutions to create zip file of all xls files, but haven't come across any demo. (.txt and .doc files generate just fine, but .xls files does not open if jsZip is used). Any help would be appreciated!!
What I need is an xls file to be generated dynamically, and the same file to be compressed as zip
EDIT :-
Here's some of the code which I tried (but with no success)
var newExcelData = {'Name':'abc'};
//var res = alasql("SELECT * INTO XLSX('Summary.xlsx',{headers:true}) FROM ? ", [newExcelData]);
var zip = new JSZip();
zip.file(alasql("SELECT * INTO XLSX('Summary.xlsx',{headers:true}) FROM ? ", [newExcelData]));
zip.generateAsync({ type: "blob" })
.then(function (content) {
saveAs(content, "example.zip");
});
PS:- I'm able to make it work in case of generating .xls file.
Please refer below code:-
var newExcelData = {'Name':'abc', 'Age':'12'};
var zip = new JSZip();
zip.file("test.xls", [newExcelData]);
zip.generateAsync({ type: "blob" })
.then(function (content) {
saveAs(content, "example.zip");
});
But although excel sheet is generated, on opening excel sheet is blank.
Please help!!
Hi, here's an update :-
I've tried to make use of js-xlsx library - https://github.com/SheetJS/js-xlsx - to generate xls file and then zip it. Please refer the below code..
function Create_Zip() {
function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = { v: data[R][C] };
if (cell.v === null) continue;
var cell_ref = XLSX.utils.encode_cell({ c: C, r: R });
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n'; cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
}
else cell.t = 's';
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
}
var data = [[1, 2, 3], [true, false, null, "sheetjs"], ["foo", "bar", new Date("2014-02-19T14:30Z"), "0.3"], ["baz", null, "qux"]];
var ws_name = "SheetJS";
function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
}
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' });
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
var jsonse = JSON.stringify([s2ab(wbout)]);
var testblob = new Blob([jsonse], { type: "application/json" });
console.log(testblob);
var zip = new JSZip();
zip.file("trial.xls", testblob);
var downloadFile = zip.generateAsync({ type: "blob" });
saveAs(downloadFile, 'test.zip');
}
But, the problem here is that I keep getting this error: 'The data of 'trial.xls' is in an unsupported format !' in the console :(. Is there any way I can make this work?
I'm at my wits end now :(
Not an answer (see below) but an explanation of what's going on:
To add a file, JSZip needs its binary content (as Blob, Uint8Array, etc). The line zip.file("test.xls", [newExcelData]); can't work for example: [newExcelData] is not a binary content but an array of js object.
What you need to figure out is how to get the content of the xlsx file. SELECT * INTO XLSX('Summary.xlsx') will trigger a download and return 1, it's not what you want. I searched on my side but can't find a way to do it with alasql.
Once/if you find the solution, the JSZip part looks correct.
Edit, following your switch to js-xlsx:
You use JSZip v2 (needed by js-xlsx) which doesn't support Blob inputs. However, wbout is a binary string which is supported:
zip.file("trial.xls", wbout, {binary: true});
Then, replace zip.generateAsync (added in JSZip v3):
var downloadFile = zip.generate({type: "blob" });
saveAs(downloadFile, 'test.zip');
Here is the solution I found using JSZip, XLSX and File Saver libraries.
Import:
import * as XLSX from "xlsx";
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
Here is an example of compressing a .xlsx inside a zip:
let zip = new JSZip();
const jsonData = [
{
"Product": "Red Velvet Cupcake",
"Price": "6",
"GluttenFree": "Yes",
},
{
"Product": "Cheesecake",
"Price": "15",
"GluttenFree": "No",
}
];
const workBook: XLSX.WorkBook = XLSX.utils.book_new();
const workSheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
XLSX.utils.book_append_sheet(workBook, workSheet, 'Bakery');
const workBookBuffer = XLSX.write(workBook, { bookType: 'xlsx', type: 'array' });
const fileData = new Blob([workBookBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'});
zip.file('Products.xlsx', fileData);
zip.generateAsync({type:"blob"}).then(function (blob) {
saveAs(blob, "WorkBooks.zip");
});
This code generates a zip file named 'WorkBooks.zip' that contains the file 'Products.xlsx'. This is how the excel looks like:
Some file-saver examples: https://www.tabnine.com/code/javascript/modules/file-saver.
Here is the JSZip method used:
https://stuk.github.io/jszip/documentation/api_jszip/file_data.html
I'm new to ace-editor and I have included custom mode to validate my code and every line should end up with semicolon, If semicolon is not present in my query by mistake then the editor should gives up the warning like "Missing Semicolon".
define('ace/mode/javascript-custom', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextMode = require("ace/mode/text").Mode;
var Tokenizer = require("ace/tokenizer").Tokenizer;
var ExampleHighlightRules = require("ace/mode/example_highlight_rules").ExampleHighlightRules;
var Mode = function() {
this.HighlightRules = ExampleHighlightRules;
};
oop.inherits(Mode, TextMode);
(function() {
this.lineCommentStart = "--";
this.blockComment = {
start: "->",
end: "<-"
};
}).call(Mode.prototype);
exports.Mode = Mode;
});
define('ace/mode/example_highlight_rules', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
var ExampleHighlightRules = function() {
var keywordMapper = this.createKeywordMapper({
"variable.language": "this",
"keyword": "one|two",
"constant.language": "true|false|null"
}, "text", true);
this.$rules = {
"start": [{
token: "comment",
regex: "->",
next: [{
regex: "<-",
token: "comment",
next: "start"
}, {
defaultToken: "comment"
}]
}, {
regex: "\\w+\\b",
token: keywordMapper
}, {
token: "comment",
regex: "--.*"
}, {
token: "string",
regex: '"',
next: [{
regex: /\\./,
token: "escape.character"
}, {
regex: '"',
token: "string",
next: "start"
}, {
defaultToken: "string"
}]
}, {
token: "numbers",
regex: /\d+(?:[.](\d)*)?|[.]\d+/
}]
};
this.normalizeRules()
};
oop.inherits(ExampleHighlightRules, TextHighlightRules);
exports.ExampleHighlightRules = ExampleHighlightRules;
});
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/javascript-custom");
editor.setOptions({
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/monokai");
var lines = editor.session.doc.getAllLines();
var errors = [];
for (var i = 0; i < lines.length; i++) {
if (/[\w\d{(['"]/.test(lines[i])) {
alert("hello");
errors.push({
row: i,
column: lines[i].length,
text: "Missing Semicolon",
type: "error"
});
}
}
<script src="https://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<div id="editor" style="height: 200px; width: 400px"></div>
<div id="commandline" style="position: absolute; bottom: 10px; height: 20px; width: 800px;"></div>
UPDATE:
The following js files are generated from ace and added to my rails application, the files are loaded in rails app but the functionality (semicolon check) doesn't seem to be working.
worker-semicolonlineend - http://pastebin.com/2kZ2fYr9
mode-semicolonlineend - http://pastebin.com/eBY5VvNK
Update:
In ace editor, type in a query1, query2 in line 1 and line 2 respectively
Leave the third line blank
Now in fourth line, type a query without semicolon in the end, x mark appears in third line
5 And when the fifth line is also without a semicolon, then the x mark is displayed at fourth query
Ace editor widely support this kind analysis for JavaScript by default:
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="editor">function foo() { ; // unnessesary semicolon
var x = "bar" // missing semicolon
return x; // semicolon in place
}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js" type="text/javascript"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
Just make sure that worker file worker-javascript.js is available for your code. In code snippet above I use CDN to get Ace build, so worker is always available. You can configure JSHint via worker options.
Update: But if really need something beyond that you will need to do the following as my understanding goes:
Create Worker and Mode for you kind of analysis
Download Ace source code and install NodeJS
Put your new files within correspond Ace source code folders
Build Ace
Add build files to your project
Use new mode: editor.getSession().setMode("ace/mode/semicolonlineend");
Worker that perform line ending check will look something like that:
define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var Mirror = require("../worker/mirror").Mirror;
var SemicolonLineEndCheckWorker = exports.SemicolonLineEndCheckWorker = function (sender) {
Mirror.call(this, sender);
this.setTimeout(500);
this.setOptions();
};
oop.inherits(SemicolonLineEndCheckWorker, Mirror);
(function() {
this.onUpdate = function () {
var text = this.doc.getValue();
var lines = text.replace(/^#!.*\n/, "\n").match(/[^\r\n]+/g);
var errors = [];
for (var i = 0; i < lines.length; i++) {
var lastLineCharacter = lines[i].trim().slice(-1);
if (lastLineCharacter === ';')
continue;
errors.push({
row: i,
column: lines[i].length-1,
text: "Missing semicolon at the end of the line",
type: "warning",
raw: "Missing semicolon"
});
}
this.sender.emit("annotate", errors);
};
}).call(SemicolonLineEndCheckWorker.prototype);
});
New mode that uses worker:
define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var Mode = function() { };
oop.inherits(Mode, TextMode);
(function() {
this.createWorker = function(session) {
var worker = new WorkerClient(["ace"], "ace/mode/semicolonlineend_worker",
"SemicolonLineEndCheckWorker");
worker.attachToDocument(session.getDocument());
worker.on("annotate", function(results) {
session.setAnnotations(results.data);
});
worker.on("terminate", function() {
session.clearAnnotations();
});
return worker;
};
this.$id = "ace/mode/semicolonlineend";
}).call(Mode.prototype);
exports.Mode = Mode;
});
I want to add a new month view to fullcalendar where all the day are in column (like a timeline).
Is there a way to do that properly and remain compatible with the original plugin ?
Update
Note that fullcalendar now has another system for handling third party views and plugins.
How I do it now:
(function() {
'strict';
var FC = $.fullCalendar, // a reference to FullCalendar's root namespace
View = FC.View, // the class that all views must inherit from
ListView; // our subclass
ListView = View.extend({ // make a subclass of View
computeRange: function(date) {
var intervalDuration = moment.duration(this.opt('duration') || this.constructor.duration || {
days: 10
});
var intervalUnit = 'day';
var intervalStart = date.clone().startOf(intervalUnit);
var intervalEnd = intervalStart.clone().add(intervalDuration);
var start, end;
// normalize the range's time-ambiguity
intervalStart.stripTime();
intervalEnd.stripTime();
start = intervalStart.clone();
start = this.skipHiddenDays(start);
end = intervalEnd.clone();
end = this.skipHiddenDays(end, -1, true); // exclusively move backwards
return {
intervalDuration: intervalDuration,
intervalUnit: intervalUnit,
intervalStart: intervalStart,
intervalEnd: intervalEnd,
start: start,
end: end
};
},
initialize: function() {
// called once when the view is instantiated, when the user switches to the view.
// initialize member variables or do other setup tasks.
View.prototype.initialize.apply(this, arguments);
},
render: function() {
// responsible for displaying the skeleton of the view within the already-defined
// this.el, a jQuery element.
View.prototype.render.apply(this, arguments);
},
computeTitle: function() {
return moment().format(this.opt('titleFormat'));
},
setHeight: function(height, isAuto) {
// responsible for adjusting the pixel-height of the view. if isAuto is true, the
// view may be its natural height, and `height` becomes merely a suggestion.
this.el.height(height);
View.prototype.setHeight.apply(this, arguments);
},
renderEvents: function(events) {
// reponsible for rendering the given Event Objects
var noDebug = true;
noDebug || console.log(events);
var eventsCopy = events.slice().reverse(); //copy and reverse so we can modify while looping
var tbody = $('<tbody></tbody>');
this.scrollerEl = this.el.addClass('fc-scroller');
this.el.html('')
.append('<table style="border: 0; width:100%"></table>').children()
.append(tbody);
var periodEnd = this.end.clone(); //clone so as to not accidentally modify
noDebug || console.log('Period start: ' + this.start.format("YYYY MM DD HH:mm:ss Z") + ', and end: ' + this.end.format("YYYY MM DD HH:mm:ss Z"));
var currentDayStart = this.start.clone();
while (currentDayStart.isBefore(periodEnd)) {
var didAddDayHeader = false;
var currentDayEnd = currentDayStart.clone().add(1, 'days');
noDebug || console.log('=== this day start: ' + currentDayStart.format("YYYY MM DD HH:mm:ss Z") + ', and end: ' + currentDayEnd.format("YYYY MM DD HH:mm:ss Z"));
//Assume events were ordered descending originally (notice we reversed them)
for (var i = eventsCopy.length - 1; i >= 0; --i) {
var e = eventsCopy[i];
var eventStart = e.start.clone();
var eventEnd = this.calendar.getEventEnd(e);
if (!noDebug) {
console.log(e.title);
console.log('event index: ' + (events.length - i - 1) + ', and in copy: ' + i);
console.log('event start: ' + eventStart.format("YYYY MM DD HH:mm:ss Z"));
console.log('event end: ' + this.calendar.getEventEnd(e).format("YYYY MM DD HH:mm:ss Z"));
console.log('currentDayEnd: ' + currentDayEnd.format("YYYY MM DD HH:mm:ss Z"));
console.log(currentDayEnd.isAfter(eventStart));
}
if (currentDayStart.isAfter(eventEnd) || (currentDayStart.isSame(eventEnd) && !eventStart.isSame(eventEnd)) || periodEnd.isBefore(eventStart)) {
eventsCopy.splice(i, 1);
noDebug || console.log("--- Removed the above event");
} else if (currentDayEnd.isAfter(eventStart)) {
//We found an event to display
noDebug || console.log("+++ We added the above event");
if (!didAddDayHeader) {
tbody.append('\
<tr class="fc-header" date="">\
<th colspan="2">\
<span class="fc-header-day">' + currentDayStart.format('dddd') + '</span>\
<span class="fc-header-date">' + currentDayStart.format(this.opt('columnFormat')) + '</span>\
</th>\
</tr>');
didAddDayHeader = true;
}
/*
<td class="fc-event-handle">\
<span class="fc-event"></span>\
</td>\
*/
var segEl = $('\
<tr class="fc-row fc-event-container fc-content">\
<td class="fc-time">' + (e.allDay ? this.opt('allDayText') : e.start.format('H:mm') + '-' + e.end.format('H:mm')) + '</td>\
<td>\
<div class="fc-title">' + e.title + '</div>\
<div class="fc-description">' + e.location + '</div>\
</td>\
</tr>');
tbody.append(segEl);
//Tried to use fullcalendar code for this stuff but to no avail
(function(_this, myEvent, mySegEl) { //temp bug fix because 'e' seems to change
segEl.on('click', function(ev) {
return _this.trigger('eventClick', mySegEl, myEvent, ev);
});
})(this, e, segEl);
}
}
currentDayStart.add(1, 'days');
}
this.updateHeight();
View.prototype.renderEvents.apply(this, arguments);
},
destroyEvents: function() {
// responsible for undoing everything in renderEvents
View.prototype.destroyEvents.apply(this, arguments);
},
renderSelection: function(range) {
// accepts a {start,end} object made of Moments, and must render the selection
View.prototype.renderSelection.apply(this, arguments);
},
destroySelection: function() {
// responsible for undoing everything in renderSelection
View.prototype.destroySelection.apply(this, arguments);
}
});
FC.views.list = ListView; // register our class with the view system
})();
For older versions of fullcalendar
I made something like what you're talking about:
https://github.com/samedii/fullcalendar
Just set
basicListInterval: { 'days': 30 }
The view is called 'basicList'
Edit (more graphic solution):
src/basic/basicList.js
/* A view with a simple list
----------------------------------------------------------------------------------------------------------------------*/
fcViews.basicList = BasicListView; // register this view
function BasicListView(calendar) {
BasicView.call(this, calendar); // call the super-constructor
}
BasicListView.prototype = createObject(BasicView.prototype); // define the super-class
$.extend(BasicListView.prototype, {
name: 'basicList',
incrementDate: function(date, delta) {
var out = date.clone().stripTime().add(delta, 'days');
out = this.skipHiddenDays(out, delta < 0 ? -1 : 1);
return out;
},
render: function(date) {
this.intervalStart = date.clone().stripTime();
this.intervalEnd = this.intervalStart.clone().add(30, 'days');
this.start = this.skipHiddenDays(this.intervalStart);
this.end = this.skipHiddenDays(this.intervalEnd, -1, true);
this.title = this.calendar.formatRange(
this.start,
this.end.clone().subtract(1), // make inclusive by subtracting 1 ms
this.opt('titleFormat'),
' \u2014 ' // emphasized dash
);
BasicView.prototype.render.call(this, 30, 1, true); // call the super-method
}
});
I think you need to run npm install && bower install and then grunt dev to build.