How can I hack the Thunderbird Lightning extension to fully color categories
The category-overlay.png image is merely a gradient overlay to give the category bar the right looks.
Two options here. One more easy but not as reliable, the other a bit more difficult:
Option A: Easy
Create a userChrome.css in your $profile/chrome/ directory. It should contain the following:
.calendar-color-box[categories~="mycategory"],
.calendar-event-box-container[categories~="mycategory"] {
background-color: #abc123 !important;
}
You'll need to do this for each category you'd like to change the color for. Note that changing the color of the category in the Lightning options won't change the category color you set here.
Option B: More complete
You'll need to modify some files inside lightning.xpi here. This solution merely requires you to set the category colors in Lightning and will also work for newly added categories. Note that this way events without a category are transparent, if you want more you'll have to do it on your own.
- Open lightning.xpi with a zip program
- Enter the directory chrome/
- Open the containing calendar.jar with a zip program
- Descend into content/calendar/
- Open calendar-multiday-view.xml
- search "calendar-color-box" and remove it from the class attribute
- a few lines above there is a <content> tag, add class="category-color-box" to it
- Open calendar-month-view.xml and calendar-view-core.xml and do the same
- Save the files back to calendar.jar
- Save calendar.jar back to lightning.xpi
- Install the modified lightning.xpi
If you'd rather see a patch, this applies to the latest comm-central source:
diff --git a/calendar/base/content/calendar-month-view.xml b/calendar/base/content/calendar-month-view.xml
--- a/calendar/base/content/calendar-month-view.xml
+++ b/calendar/base/content/calendar-month-view.xml
@@ -52,21 +52,20 @@
<bindings id="calendar-month-view-bindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="calendar-month-day-box-item" extends="chrome://calendar/content/calendar-view-core.xml#calendar-editable-item">
- <content mousethrough="never" tooltip="itemTooltip">
+ <content mousethrough="never" tooltip="itemTooltip" class="category-color-box">
<xul:vbox flex="1">
<xul:hbox>
<xul:box anonid="event-container"
- class="calendar-color-box"
xbl:inherits="calendar-uri,calendar-id"
flex="1">
<xul:box class="calendar-event-selection" orient="horizontal" flex="1">
<xul:stack anonid="eventbox"
class="calendar-event-box-container"
xbl:inherits="readonly,flashing,alarm,allday,priority,progress,status,calendar,categories"
flex="1">
<xul:hbox class="calendar-event-details">
diff --git a/calendar/base/content/calendar-multiday-view.xml b/calendar/base/content/calendar-multiday-view.xml
--- a/calendar/base/content/calendar-multiday-view.xml
+++ b/calendar/base/content/calendar-multiday-view.xml
@@ -2119,20 +2119,19 @@
]]></handler>
</handlers>
</binding>
<!--
- An individual event box, to be inserted into a column.
-->
<binding id="calendar-event-box" extends="chrome://calendar/content/calendar-view-core.xml#calendar-editable-item">
- <content mousethrough="never" tooltip="itemTooltip">
+ <content mousethrough="never" tooltip="itemTooltip" class="category-color-box">
<xul:box xbl:inherits="orient,width,height" flex="1">
<xul:box anonid="event-container"
- class="calendar-color-box"
xbl:inherits="orient,readonly,flashing,alarm,allday,priority,progress,status,calendar,categories,calendar-uri,calendar-id"
flex="1">
<xul:box class="calendar-event-selection" orient="horizontal" flex="1">
<xul:stack anonid="eventbox"
align="stretch"
class="calendar-event-box-container"
flex="1"
xbl:inherits="context,parentorient=orient,readonly,flashing,alarm,allday,priority,progress,status,calendar,categories">
diff --git a/calendar/base/content/calendar-view-core.xml b/calendar/base/content/calendar-view-core.xml
--- a/calendar/base/content/calendar-view-core.xml
+++ b/calendar/base/content/calendar-view-core.xml
@@ -46,21 +46,21 @@
xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="calendar-editable-item">
<content mousethrough="never"
tooltip="itemTooltip"
- tabindex="-1">
+ tabindex="-1"
+ class="category-color-box">
<xul:vbox flex="1">
<xul:hbox>
<xul:box anonid="event-container"
- class="calendar-color-box"
xbl:inherits="calendar-uri,calendar-id"
flex="1">
<xul:box class="calendar-event-selection" orient="horizontal" flex="1">
<xul:stack anonid="eventbox"
class="calendar-event-box-container"
flex="1"
xbl:inherits="readonly,flashing,alarm,allday,priority,progress,status,calendar,categories">
<xul:hbox class="calendar-event-details">
Option C: Change Javascript
This would be the best working hack, although it requires javascript changes. Open calendar.jar as described in Option B and check out calendar-views.js, there are two functions: updateStyleSheetForViews() and updateStyleSheetForCategory(). I'll leave this to people that want to tinker with it themselves, but the idea would be to add a rule for .calendar-color-box[categories~=...] that overrides the default rule in case there are categories. This way if there is no category set, the calendar color is used, otherwise the desired category color.
Have fun :)
How to create an extension for Thunderbird/Lightning
Easiest way to detect Lightning is checking whether its interfaces are defined, e.g.:
if ("calICalendar" in Components.interfaces)
alert("Lightning is installed!");
Using its features is a different thing - depends on what you are trying to do. For most things importing Lightning's modules and using them should do:
Components.utils.import("resource://calendar/modules/calUtils.jsm");
alert(cal.getCalendarManager().getCalendars());
I don't think it is properly documented however, you will have to look at the source code.
How to get todos from Thunderbird/Lightning calendars?
You are going in the right direction. You just need to pass the flag that you want todos only. An example can be found here.
To elaborate more on your example below, there are a few syntax errors and you might need different flags. I'm not sure why the alert is needed, that sounds to me like the event loop is not being spun. In what context are you calling these bits?
Try this:
var arrayItems = new Array();
var todoListener = {
onOperationComplete: function(aCalendar, aStatus, aOperationType, aId, aDetail) {},
onGetResult: function(aCalendar, aStatus, aItemType, aDetail, aCount, aItems) {
arrayItems = arrayItems.concat(aItems);
}
};
var filter = aCalendar.ITEM_FILTER_TYPE_TODO | aCalendar.ITEM_FILTER_COMPLETED_ALL;
aCalendar.getItems(filter, 0, null, null, todoListener);
Show 2 Times from Different Time Zones in Week and Day View in Thunderbird Lightning Extension
I didn't solve the problem for the general case. I simply caused the time to be displayed in the current time zone and the previous hour to be displayed. In my case, the current time zone is USA Mountain time and the previous hour ends up being USA Pacific time.
The file calendar-multiday-view.xml in the following jar file must be edited while Thunderbird is not running.
C:\Users\nreynold.ORADEV\AppData\Roaming\Thunderbird\Profiles\profile\extensions\{e2fda1a4-762b-4020-b5ad-a41df1933103}\chrome.jar
The method makeTimeBox() must be changed as indicated by comments:
function makeTimeBox(timestr, time2str, size) { // Add time2str parameter
var box = createXULElement("box");
box.setAttribute("orient", orient);
box.setAttribute("align", "left"); // Add
if (orient == "horizontal") {
box.setAttribute("width", size);
} else {
box.setAttribute("height", size);
}
var label = createXULElement("label");
label.setAttribute("class", "calendar-time-bar-label");
label.setAttribute("value", timestr);
label.setAttribute("style", "color: #4080C0; font-weight: bold;"); // Replace "align"
box.appendChild(label);
var label = createXULElement("label"); // Add
label.setAttribute("class", "calendar-time-bar-label"); // Add
label.setAttribute("value", time2str); // Add
box.appendChild(label); // Add
return box;
}
Add the following method after makeTimeBox().
function makeTime(hour) {
var h = hour % 12;
if (h == 0)
h = 12;
var s = hour >= 12 ? " pm" : " am";
var result = h + s;
return result;
}
Remove the following line which appears a few lines below makeTimeBox()
var formatter = Components.classes["@mozilla.org/intl/scriptabledateformat;1"].
getService(Components.interfaces.nsIScriptableDateFormat);
Change the following line...
var timeString;
... to be ...
var timeString, time2String;
About 25 lines lower, replace the following lines...
timeString = formatter.FormatTime("",
Components.interfaces.nsIScriptableDateFormat.timeFormatNoSeconds,
theHour, 0, 0);
box = makeTimeBox(timeString, durPix);
... to be ...
timeString = makeTime(theHour) + " MT";
ptHour = theHour - 1;
ptHour += 23;
ptHour %= 24;
ptHour += 1;
time2String = makeTime(ptHour) + " PT";
box = makeTimeBox(timeString, time2String, durPix);
Related Topics
Bootstrap 4 Center Pagination in Column
Larger Div Centered Inside Smaller Div
Disable HTML5 Video Download at CSS Breakpoint
Centering 2 Divs Inside Another Vertically
Sass Is Concatenating Instead of Adding
100% Div Height Without Scrollbar
Should I Use The Svg Gradients Generated by Colorzilla for Ie9
Prevent Highlighter Cursor in CSS
How to Add Space After a Colon in CSS with Sublime Text 2
How to Use Font-Family with Same Name
CSS Rules for Webkit Based Browsers
How to Specify Image Paths in CSS Files
Hiding Text Using "Text-Indent"
CSS3 Element with Opacity:0 (Invisible) Responds to Mouse Events
Hiding Text Using "Text-Indent"
Change The Title Header Color Permanently in Shiny Dashboard